colorify.js

2018-07-12 admin

colorify.js是什么

什么是colorify.js,The simple, customizable, tiny javascript color extractor.

colorify.js介绍、colorify.js使用

</script> </body>


And add the [colorify.css](https://github.com/LukyVj/Colorify.js/blob/master/styles/colorify.css) to the head:

```text-html-basic
  <link rel="stylesheet" href="colorify.css">

Browserify setup

Just require colorify as any other CommonJS module after installing it via npm:

var colorify = require('colorify');

In terms of CSS you have to decide whether you reference the CSS file as described above or use a tool like parcelify to bundle the CSS.

Basic config

Keep in mind that you have to host the images on your server in order to avoid CORS restrictions

If your page contains only one section where you want to use colorify, you can use the basic config, to do so, you just need to load colorify like this :

Which is the equivalent to :

colorify({
  id: 1,
  attr: 'colorify',
  container: 'scene',
  images: false,
  accuracy: 100,
  gradient: false,
  gradientDirection: 'to bottom right',
  padding: 4,
  lazyReveal: {
    transition: 1, 
    delay: 1,
    steps: false
  },
  giveTo: false,
  revealOn: false
});

Load image dynamically

Sometimes you don’t want to bother yourself writing too much code, you may want to load your images dynamically, there is a param for this in colorify.js, the images: parameter, you can pass an array of images to add them on your selected container

colorify({
  container: 'dynamic-images',
  images: [
    'path/to/image1.png',
    'path/to/image2.jpg',
    'path/to/image3.gif'
  ]
});

Get main color

The main value of colorify is the ability to extract the average color of an image, to do so, call the function like this

colorify({
  container: 'colorify-main-color',
  accuracy: 10
});

And for example you’ve got this markup

<div colorify-main-color>
  <img colorify src="image1.jpg">
  <img colorify src="image2.jpg">
  <img colorify src="image3.jpg">
</div>

It will result in :

<div colorify-main-color>
  <div class="image-container" style="padding: 4px; background-color: rgb(221, 89, 80);">
    <img colorify="" src="image1.jpg" class="colorify visible all-loaded" style="transition: all 1000ms ease 1000ms;">
  </div>
  <div class="image-container" style="padding: 4px; background-color: rgb(63, 147, 220);">
    <img colorify="" src="image2.jpg" class="colorify visible all-loaded" style="transition: all 1000ms ease 1000ms;">
    </div>
  <div class="image-container" style="padding: 4px; background-color: rgb(22, 196, 102);">
    <img colorify="" src="image3.jpg" class="colorify visible all-loaded" style="transition: all 1000ms ease 1000ms;">
  </div>
</div>

Get a gradient

To get a gradient from an image, you write the colorify script with the following parameters and values

colorify({
  container: 'colorify-gradient-color',
  accuracy: 10,
  gradient: true,
  gradientDirection: 'to bottom right'
});

With the following markup

<div colorify-gradient-color>
  <img colorify src="image1.jpg">
  <img colorify src="image2.jpg">
  <img colorify src="image3.jpg">
</div>

It will result in

<div colorify-gradient-color>
  <div class="image-container" style="padding: 4px; background-image: linear-gradient(to right bottom, rgb(233, 117, 104), rgb(224, 86, 77)); background-color: rgb(221, 89, 80);">
    <img src="image1.jpg" colorify="" class="colorify visible all-loaded" style="transition: all 1000ms ease 1000ms;">
  </div>
  <div class="image-container" style="padding: 4px; background-image: linear-gradient(to right bottom, rgb(61, 157, 220), rgb(75, 152, 222)); background-color: rgb(63, 147, 220);">
    <img src="image2.jpg" colorify="" class="colorify visible all-loaded" style="transition: all 1000ms ease 1000ms;">
  </div>
  <div class="image-container" style="padding: 4px; background-image: linear-gradient(to right bottom, rgb(29, 208, 118), rgb(22, 163, 75)); background-color: rgb(22, 196, 102);">
    <img src="image3.jpg" colorify="" class="colorify visible all-loaded" style="transition: all 1000ms ease 1000ms;">
  </div>

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35817.html

文章标题:colorify.js

回到顶部