從數據url/uri圖像中提取像素顏色

Question

所以基本上我有這個項目，我有截圖上傳到一個網站直接與dataURL或dataURI轉換（我不知道哪一個是正確的），我我正致力於讓我可以從屏幕截圖中獲取像素相關信息。

我將數據URL插入到背景圖像屬性中，並且我無法使用畫布作爲我的項目所具有的其他功能。

我想獲得給定像素在特定位置的特定顏色。我有包含dataURL的字符串。有沒有辦法從中提取像素顏色？

對於不熟悉數據的URL的，這裏是我的javascript對我的截圖之一創建一個：

pastebin.com/NRad8nQr

我發現了很多的這個結果但是我找不到一個沒有使用畫布的單一畫面。

Answer 1

不幸的是，像素訪問的唯一內置方式是使用畫布。

DataURL本身可以使用Base64進行解碼，但是可以爲您提供壓縮的二進制數據。爲了得到你需要重新實現實際圖像解碼所有支持格式的像素數據，所以JPEG，PNG，GIF等

如果，例如，限制它爲JPEG，您可以使用https://github.com/gchudnov/jpeg-asm/blob/master/README.md然後：

// pseudo code 
var jpegData = atob(dataUrl) 
var pixels = decodeJPEG(jpegData) 
var color = pixels.slice((y * width + x) *4, 4) 

我創建a working example for PNG on Glitch