javascript - 如何使用 x 和 y 坐标从图像中获取像素颜色？

Question

我想做的是取“pixel.jpg”和 cosole.log 的 RGB 值由变量确定的 x 和 y 值处的像素。我想我需要创建 Canvas 然后扫描整个事情使用 for 循环.. ??

<meta charset="UTF-8">
title>Pixel</title>
<link href="pixel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="pixel.js"></script>

<pre id="output"></pre>

Answer 1

在 Canvas 上绘制像素。然后使用getImageData。

var getPixelColor = function(img,x,y){
    var canvas = document.createElement('canvas');
    canvas.width = 1;
    canvas.height = 1;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img,x,y,1,1,0,0,1,1);
    return ctx.getImageData(0,0,1,1);
}