canvas具有强大的画图功能不仅如此也能方便的操作图片。现在来演示一下如何获取图片上指定坐标的颜色。效果预览https://huatuya.com一、代码ps这里注意的是canvas的getImageData本地会有跨域异常Tainted canvases may not be exported需要在线上测试。原理利用getImageData 获取指定位置的像素通过像素拿到颜色。会在页面生成canvas元素建议利用id进行复用。img :srccurrentImg.src clickgetBgColor/ 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