canvas 获取图片中某个坐标的颜色
同步发布：https://blog.jijian.link/2020-04-05/canvas-get-color/
由于功能受限，此处不能放 iframe 嵌入链接，如需看到实时效果，请移步 https://blog.jijian.link/2020-04-05/canvas-get-color/
强大的 canvas 可以做很多事，包括手绘，压缩图片，图片滤镜，3D效果等等。
本文仅用 canvas 冰山一角的功能获取坐标点颜色。
源码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas 获取图像颜色</title> <style> body { transition: background ease 0.2s; text-align: center; padding: 0; margin: 0; } #cursor { width: 9px; height: 9px; position: absolute; } #cursor::before, #cursor::after { content: ''; position: absolute; background-color: #000; } #cursor::before { left: 4px; top: 0; width: 1px; height: 9px; } #cursor::after { top: 4px; left: 0; width: 9px; height: 1px; } </style> </head> <body> <h2>点击图片任意位置</h2> <img id="img" src="./1.jpg" alt=""> <h3 id="output"></h3> <script> window.addEventListener('load', function () { // 将 img 绘制在 canvas 中 function draw (img) { var style = window.getComputedStyle(img); var width = parseInt(style.width, 10); var height = parseInt(style.height, 10); var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); // 获取坐标颜色 function getPixelColor (x, y) { var imageData = ctx.getImageData(x, y, 1, 1); var pixel = imageData.data; var r = pixel[0]; var g = pixel[1]; var b = pixel[2]; var a = pixel[3] / 255; a = Math.round(a * 100) / 100; var rHex = r.toString(16); r < 16 && (rHex = "0" + rHex); var gHex = g.toString(16); g < 16 && (gHex = "0" + gHex); var bHex = b.toString(16); b < 16 && (bHex = "0" + bHex); var rgbaColor = "rgba(" + r + "," + g + "," + b + "," + a + ")"; var rgbColor = "rgb(" + r + "," + g + "," + b + ")"; var hexColor = "#" + rHex + gHex + bHex; return { rgba: rgbaColor, rgb: rgbColor, hex: hexColor, r: r, g: g, b: b, a: a }; } return { getColor: getPixelColor, }; }; // 点击位置绘制一个十字坐标 function setCursor (x, y) { // <div id="cursor" class="cursor"></div> var cursor = document.getElementById('cursor'); if (!cursor) { cursor = document.createElement('div'); cursor.id = 'cursor'; document.body.appendChild(cursor); } cursor.style.left = x - 4 + 'px'; cursor.style.top = y - 4 + 'px'; } var img = document.getElementById('img'); var output = document.getElementById('output'); var canvas = draw(img); img.addEventListener('click', function (e) { var x = e.offsetX; var y = e.offsetY; setCursor(e.pageX, e.pageY); var color = (canvas.getColor(x, y)).rgba; document.body.style.background = color; output.innerHTML = '坐标点颜色：' + color; }); }); </script> </body> </html>
核心代码为 getPixelColor 方法，该方法通过 canvas 的 context 获取坐标点数据，将数据转换为 rgba 值即可。
兼容性
主要运用 canvas ，所以如果浏览器不支持 canvas，则该方法无效。比如 IE8 就不支持。
