内容简介:大家可以通过上传/拖拽图片的方式获取图片主题色。欢迎Star~Colorfulimg是一个能够通过canvas获取图片主题色的js工具库。
大家可以通过上传/拖拽图片的方式获取图片主题色。
欢迎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图像
- 首先我们要新建一个canvas标签并且访问它的绘画上下文:
let canvas = document.createElement('canvas') let context = canvas.getContext && canvas.getContext('2d') 复制代码
- 绘制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 复制代码
在我第一次测试的时候遇到了跨域的问题:
图片如果不同源的话必须要加 crossorigin="anonymous"
的属性,并且服务器存储那边也要开放相应的权限才行。 <img id="img" crossorigin="anonymous">
处理获取的颜色数据
我们先log一下拿到的数据是什么吧:
是一个有着一堆数据的数组,这些数据是什么呢?我们先看一下MDN:
也就是说按顺序来看前四位组成一个以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获取图片主题色!》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 使用JGit获取变更细节
- WebRTC 使用之 —— 使用 getUserMedia 获取视频流
- PowerShell 使用 WMI 获取信息
- 使用 PHP 获取网站 SSL 证书信息
- 使用 Docker CertBot 获取 SSL 证书
- Python获取CPU、内存使用率以及网络使用状态代码
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。