获取图片主要颜色

前端开发JavaScript获取图片主要颜色小橘不颂兮2024-02-062024-02-06获取图片主要颜色1. 获取图片并绘制到canvas上获取 DOM有两种方式：

通过getElementById等方式获取现有的元素

通过new Image()创建一个实例对象

12345678910111213141516const img = new Image();img.onload = () => { // 获取图片的宽高 const w = img.width; const h = img.height; // 创建canvas const canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; // 绘制图片在画布上 const context = canvas.getContext('2d'); context.drawImage(img, 0, 0);}

2. 获取像素点数据12// 获取像素点rgba的数据 let imageData = context.getImageData(0,0,w,h).data;

该数组为图片所有像素点的rgba信息，每四个单位为一个像素点信息，分别对应r,g,b,a。

如：[255,255,255,1,0,0,0,0]，即代表两个像素点rgba(255,255,255,1)和rgba(0,0,0,0)。

3. 对像素点进行统计并排序，获得最多的颜色信息1234567891011121314151617181920// 使用 Map 存储颜色及其出现次数const blockSize = 100; // 设置块的大小const colorMap = new Map();for (let y = 0; y < h; y += blockSize) { for (let x = 0; x < w; x += blockSize) { const index = (y * w + x) * 4; // 计算当前块的起始索引 const r = imageData[index]; const g = imageData[index + 1]; const b = imageData[index + 2]; const a = imageData[index + 3]; const key = `${r},${g},${b},${a}`; colorMap.set(key, (colorMap.get(key) || 0) + 1); }}// 像素点排序const sortedColors = [...colorMap.entries()].sort((a, b) => b[1] - a[1]);// 获取颜色出现次数最多的值 mainColor = `rgba(${sortedColors[0][0]})`;

canvas的getImageData和toDataUrl跨域问题解决存在跨域问题时，浏览器会抛出错误：

Uncaught DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.

解决方法：

使用crossOrigin属性

示例如下：

1234const img = new Image();// 解决跨域img.crossOrigin = 'anonymous';

crossOrigin有两个值：

anonymous：元素的跨域资源请求不需要凭证标志设置

use-credentials：元素的跨域资源请求需要凭证标志设置，意味着该请求需要提供凭证

注意：crossOrigin的值只要不是use-credentials都会解析为anonymous。