获取图像的第一个像素颜色（JS / jQuery）答案

【问题标题】：Get first pixel's color of an image ( JS / jQuery )获取图像的第一个像素颜色（JS / jQuery）
【发布时间】：2015-01-19 16:20:28
【问题描述】：

我有 - 例如 - 这张照片：

var imgSrc = "http://scottkleinberg.com/wp-content/uploads/2012/10/icon-512x512.png";

而且我只需要在第一个位置像素 (0,0) 上使用 RGB 或 RGBA 或 HEX 颜色的变量：

var color = getFirstPixelColor( imgSrc ); // Should return #AAE8FE or 170,323,254 or 170,323,254,1

【问题讨论】：

标签： javascript jquery image colors pixel

【解决方案1】：

我有一个结果，但仅限于 PHP：

$imgObject = imagecreatefrompng('http://scottkleinberg.com/wp-content/uploads/2012/10/icon-512x512.png');
$fillColor = imagecolorat($imgObject, 0, 0);

 $rgba = array(
    ($fillColor >> 16) & 0xFF,
    ($fillColor >> 8) & 0xFF,
     $fillColor & 0xFF,
);

print_r($rgba);

图片是JPG还是JPEG格式：

$imgObject = imagecreatefromjpeg('http://scottkleinberg.com/wp-content/uploads/2012/10/icon-512x512.png');
$fillColor = imagecolorat($imgObject, 0, 0);

 $rgba = array(
    ($fillColor >> 16) & 0xFF,
    ($fillColor >> 8) & 0xFF,
     $fillColor & 0xFF,
);

print_r($rgba);

【讨论】：

【解决方案2】：

您需要使用 HTML5 画布。不能直接通过图片获取颜色值。

var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;

this SO 问题会为你解答清楚。

【讨论】：

ctx = 哪里？虽然，您的答案是正确的，但请尝试多解释一下。也不要忘记，OP 要求只知道 src 来获取第一个像素。这个答案似乎缺少一些步骤。