獲取圖像的第一像素的色彩（JS/jQuery的）

Question

我 - 例如 - 此PIC：

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

，我需要只用RGB或上第一位置的像素RGBA或HEX顏色（0變量， 0）：

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

Answer 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); 

Answer 2

您需要使用HTML5畫布。您無法直接通過圖像獲取顏色值。

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

this這個問題會清楚地回答你。