从数据网址/ uri图像

时间:2017-06-16 13:50:36

标签: javascript css data-uri

所以基本上我已经有了这个项目,我可以通过dataURL或dataURI转换直接上传到网站的截图(我不知道哪一个是正确的),而且我正在制作这样我就可以从截图中获取像素相关信息。

我是在背景图片属性中插入数据网址,而我无法将canvas用于我项目的其他功能。

我希望在特定位置获得给定像素的特定颜色。我有包含dataURL的字符串。有没有办法从中提取像素颜色?

对于那些不熟悉数据URL的人,这是我的javascript为我的一个截图创建的那个:

pastebin.com/NRad8nQr

我已经找到了很多关于这个主题的结果,但是我找不到一个不使用画布的单个...

1 个答案:

答案 0 :(得分: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