canvas具有强大的画图功能，不仅如此，也能方便的操作图片。现在来演示一下如何获取图片上指定坐标的颜色。
效果预览https://huatuya.com
一、代码
ps：这里注意的是canvas的getImageData本地会有跨域异常Tainted canvases may not be exported，需要在线上测试。
原理：利用getImageData 获取指定位置的像素，通过像素拿到颜色。会在页面生成canvas元素，建议利用id进行复用。
<img :src="currentImg.src" @click="getBgColor"/> data{ return (){ imgColor:"", currentImg{ src:"", id:"" } } } getBgColor(e) { var x = e.layerX; var y = e.layerY; // 加载并显示图像到canvas上 var img = new Image(); img.src = this.currentImg.src; let _this = this; let classId = "quse" + _this.currentImg.id; img.onload = function () { // 创建一个新的canvas元素 var canvas = document.querySelector("#" + classId);//注意：querySelector能获取到display:none的元素 if (!canvas) { canvas = document.createElement("canvas"); canvas.setAttribute("id", classId); //添加样式属性 document.body.appendChild(canvas); canvas.setAttribute("style", "display:none"); //隐藏掉canvas } // 设置canvas大小与要处理的图像相同 canvas.width = img.width; // 这里需要将imageWidth替换为实际图像的宽度 canvas.height = img.height; // 这里需要将imageHeight替换为实际图像的高度 // 获取2D上下文对象 var context = canvas.getContext("2d"); context.drawImage(img, 0, 0); // 将图像绘制到canvas上 // 从canvas上读取指定位置的像素数据 var pixelData = context.getImageData(x, y, 1, 1).data;//getImageData来获取指定地点的像素数据 // 提取RGB分量的值 var redValue = pixelData[0]; var greenValue = pixelData[1]; var blueValue = pixelData[2]; console.log("红色分量：" + redValue); console.log("绿色分量：" + greenValue); console.log("蓝色分量：" + blueValue); _this.imgColor = "rgb(" + redValue + "," + greenValue + "," + blueValue + ")"; }; },canvas取色获取指定位置的颜色https://daimane.com/code/html/1711635132541.html
