在 Javascript 中使用 x，y 坐标访问像素

Question

我有以下Javascript代码-

var img=new SimpleImage('image.png');

图像.png文件的尺寸为10x10。现在我需要访问坐标 (5,4( 处的像素并获取它的红色值。我已经用谷歌搜索过，但找不到使用像素坐标访问像素的方法。我该怎么做？

Answer 1

您必须将图像加载到画布上，使用 ctx.createImageData(( 获取图像数据。

摘自MDN

var img = new Image();
img.src = 'https://i.imgur.com/KM2bAUL.jpeg';
img.crossOrigin = "Anonymous";
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
img.onload = function() {
ctx.drawImage(img, 0, 0, 300, 300);
img.style.display = 'none';
};
var color = document.getElementById('color');
function pick(event) {
var x = event.layerX;
var y = event.layerY;
var pixel = ctx.getImageData(x, y, 1, 1);
var data = pixel.data;
var rgba = 'rgba(' + data[0] + ', ' + data[1] +
', ' + data[2] + ', ' + (data[3] / 255) + ')';
color.style.background =  rgba;
color.textContent = rgba;
}
canvas.addEventListener('mousemove', pick);

<div id="color">I will change</div>
<canvas id="canvas" width="300px" height="400px"></canvas>