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

Question

我正在尝试做的是 采取＆＃34; pixel.jpg＆＃34;和cosole.log的RGB值 由变量确定的x和y值处的像素。 即时通讯我假设我需要 创建一个画布，然后扫描 整个事情使用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

在画布上绘制像素。然后使用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);
}