0

最近，我最近一直在使用 HTML Canvas 5 元素试图从浏览器上的给定图像中提取图像数据，但我遇到了一些问题。使用 canvas 元素的函数（如 getDataURL 或 getImageData()）提取此数据时，跨浏览器的结果不一致。我意识到这是由于浏览器的本机代码对于每个都不同，因此渲染引擎将以不同的方式渲染图像。但是，有没有办法在浏览器中获得一致的图像结果，例如大小为 500kb-1mB 的图像？

我知道 AJAX 解决方案，从服务器调用该图像的 dataURL 的 json 对象，因为这将是原始源，因此在浏览器中是一致的。此外，将 dataURL 从服务器加载到浏览器中可能是另一种解决方案。这些问题将是性能和灵活性。还有其他可行的解决方案吗？我是否查看了我可以在客户端做的事情？

谢谢大家！

4

1 回答 1

0

好的，在继续我自己的项目后，我发现了一个对我有用的答案，并且可能适合您的目的。

toDataURL 是错误的，因为它将“二进制”数据读入画布而不是实际像素。浏览器之间在解释该二进制文件时存在不一致，无论如何，二进制数据并没有为您提供我假设您正在寻找的像素信息。

要保留数据您需要将图像（保持原始大小）放入画布，然后使用 getImageData(x,y,w,h) 将 RGBA 像素数据加载到数组中。然后，您可以简单地遍历现在“真实”的像素数据并进行处理。

我尝试将图像缩小到可管理的大小，但这在浏览器中并不总是一致的。无论如何，我只需要图像的一部分，所以这个方法可以达到我的目的，也许你可以隐藏你正在处理的全尺寸画布，并向用户展示一个有代表性的缩小画布。

于 2016-07-07T21:49:04.790 回答