获取图像的第一个像素颜色(JS/jQuery）

Get first pixel's color of an image ( JS / jQuery )

本文关键字：JS jQuery 颜色 图像 第一个 像素 获取      更新时间：2023-09-26

我有 - 例如 - 这张照片：

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

而且我只需要在第一个位置像素 （0,0） 上使用 RGB 或 RGBA 或十六进制颜色进行变量：

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

我有一个resuln，但仅限于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);

你需要使用 HTML5 canvas。您无法直接通过图像获取颜色值。

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

这个SO问题将清楚地回答您。

相关文章：