从数据 url/uri 图像中提取像素颜色

Question

所以基本上我已经有了这个项目，我将屏幕截图直接上传到网站，并使用 dataURL 或 dataURI 转换（我不知道哪个是正确的），我正在努力这样我就可以从屏幕截图中获取像素相关信息。

我在背景图像属性中插入数据 URL，我无法将 canvas 用于我的项目的其他功能。

我想获取特定位置给定像素的特定颜色。我有包含数据 URL 的字符串。有没有办法从中提取像素颜色？

对于那些不熟悉数据的人 URL，这是我的 javascript 为我的截图之一创建的：

pastebin.com/NRad8nQr

我发现了很多关于这个主题的结果，但是我找不到一个不使用 canvas..

Answer 1

不幸的是，像素访问的唯一内置方式是使用 canvas。

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)

Extract a pixel color from a data url/uri image