从数据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