使用ColorfulImg获取图片主题色!

栏目: Html5 · 发布时间: 6年前

内容简介:大家可以通过上传/拖拽图片的方式获取图片主题色。欢迎Star~Colorfulimg是一个能够通过canvas获取图片主题色的js工具库。
使用ColorfulImg获取图片主题色!
前几天遇到了获取图片主题色的需求,于是去找了一些相关的博客,发现实现起来相当简单,于是自己开发了一个获取图片主题色的网站--- ColorfulImg

大家可以通过上传/拖拽图片的方式获取图片主题色。

欢迎Star~

ColorfulImg

Colorfulimg是一个能够通过canvas获取图片主题色的js工具库。

安装:

npm i colorfulimg

使用方法:

let colorfulimg = require('colorfulimg') 
let myImg = document.getElementById('myImg')
let rgb = colorfulImg(myImg);
复制代码

这是项目地址

欢迎star~

ColorfulImg实现思路

下面说一下实现思路,主要是通过canvas的getImageData()方法获取图片每个像素点的rgba数据。通过取得平均值的方法来算出图片主题色。 所以要想实现此效果有两个限制:

  • 网站和图片必须是相同的域名(getImageData()限制图片必须同源)
  • 浏览器必须支持canvas

在canvas中绘制img图像

  1. 首先我们要新建一个canvas标签并且访问它的绘画上下文:
let canvas = document.createElement('canvas')
let context = canvas.getContext && canvas.getContext('2d')
复制代码
  1. 绘制img图像,X轴与Y轴的起始点都设置为0:
let myImg = document.getElementById('myImg')
context.drawImage(myImg , 0, 0)
复制代码

获取图片颜色数据getImageData()

getImageData()这个API需要四个参数,前两个是获取图片数据的起点,后两个是提取的图像数据矩形区域的宽度和高度,我们要得到图片全部的数据所以后两个参数就是图片的宽高,于此同时我们也要把canvas的宽高设置为图片的宽高能完全装下图片。

let height = canvas.height = imgEl.height
let width = canvas.width = imgEl.width
let data = context.getImageData(0, 0, width, height).data
复制代码

在我第一次测试的时候遇到了跨域的问题:

使用ColorfulImg获取图片主题色!

图片如果不同源的话必须要加 crossorigin="anonymous" 的属性,并且服务器存储那边也要开放相应的权限才行。 <img id="img" crossorigin="anonymous">

处理获取的颜色数据

我们先log一下拿到的数据是什么吧:

使用ColorfulImg获取图片主题色!

是一个有着一堆数据的数组,这些数据是什么呢?我们先看一下MDN:

使用ColorfulImg获取图片主题色!

也就是说按顺序来看前四位组成一个以RGBA顺序的数据: rgba(red, green, blue, alpha)

对于获取的图片数据透明度(alpha)都是255也就是不透明的所以我们不对透明度做处理,之后我们只需要把rgb的其他三个值分别求和再取均值就可以得到图片的主题色了!

let count = 0
let i = 0
let blockSize = 1
while ( (i += blockSize * 4) < length ) {
  ++count
  rgb.r = data[i] + rgb.r 
  rgb.g = data[i+1] + rgb.g
  rgb.b = data[i+2] + rgb.b
}
rgb.r = ~~(rgb.r/count)
rgb.g = ~~(rgb.g/count)
rgb.b = ~~(rgb.b/count)
复制代码

最终代码

function colorfulImg(img){
    let canvas = document.createElement('canvas'),
        context = canvas.getContext && canvas.getContext('2d'),
        height,width,length,data, 
        i = -4,
        blockSize = 5,
        count = 0,
        rgb = {r:0,g:0,b:0}
            
    height = canvas.height = imgEl.height
    width = canvas.width = imgEl.width
    context.drawImage(imgEl, 0, 0);
    data = context.getImageData(0, 0, width, height).data
    length = data.length
    while ( (i += blockSize * 4) < length ) {
    ++count;
    rgb.r += data[i];
    rgb.g += data[i+1];
    rgb.b += data[i+2];
    }
    rgb.r = ~~(rgb.r/count);
    rgb.g = ~~(rgb.g/count);
    rgb.b = ~~(rgb.b/count);
    return rgb;
}
复制代码

以上所述就是小编给大家介绍的《使用ColorfulImg获取图片主题色!》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

CSS 3实战

CSS 3实战

成林 / 机械工业出版社 / 2011-5 / 69.00元

全书一共分为9章,首先从宏观上介绍了CSS 3技术的最新发展现状、新特性,以及现有的主流浏览器对这些新特性的支持情况;然后详细讲解了CSS 3的选择器、文本特性、颜色特性、弹性布局、边框和背景特性、盒模型、UI设计、多列布局、圆角和阴影、渐变、变形、转换、动画、投影、开放字体、设备类型、语音样式等重要的理论知识,这部分内容是本书的基础和核心。不仅每个知识点都配有丰富的、精心设计的实战案例,而且详细......一起来看看 《CSS 3实战》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具