Canvas .toDataURL() 返回部分损坏的图像

Posted 2023-03-05

【中文标题】Canvas .toDataURL() 返回部分损坏的图像

【英文标题】：Canvas .toDataURL() returns partially corrupted image

【发布时间】：2018-01-08 02:48:51

【问题描述】：

我们有一个 Web 应用程序（非常间歇性地）返回部分损坏的 PNG 图像数据 URL。该图像有一个大的黑色部分，覆盖了图像的部分，但不是全部。这些图片是客户签名。 例如：

我们正在使用来自this 的签名板组件。图片 URL 使用 getSignatureImage() 例程返回。

我从访问日志中看到的唯一内容似乎显示受影响的请求来自“Samsung Galaxy Tab”设备，但使用的是 Chrome 59。但是来自同一设备的其他请求工作正常。

任何帮助表示赞赏。

【问题讨论】：

不知何故，我猜这取决于设备的内存。你能以任何方式重现它吗？

PNG 图像文件的大小是多少？此外，是否可以通过浏览器或其他具有显示图像功能的应用程序查看此图像而不会出现问题？

大家好，看起来这可能与设备相关（与内存相关）。最终用户正在尝试设备交换以查看这是否可以解决问题。要回答问题...不，我无法重现这一点，是的，签名图像在保存到 JSON 从传输回应用程序服务器之前显示在浏览器屏幕上时看起来很好。

你知道签名在离屏缓冲区中是否正常吗？

出于好奇，您能否测试一下如果将fillRect 调用替换为clearRect 会发生什么？

【参考方案1】：

我们现在已确认该问题与设备有关。

受影响的最终用户已从旧的Samsung Galaxy Tab 4 设备更改为Tab S2 设备。问题不再出现。

这似乎是旧设备上的字符串长度限制。

感谢您的帮助！

【参考方案2】：

我认为这不是内存问题。当图像占用过多内存时，图像将变为黑色（空像素 rgb(0,0,0)）。 尝试从画布中获取 blob - canvas.toBlob(function(blob) )。 可能您的图像尚未加载或绘制。在获取图像数据（base64 或 blob）之前尝试将 window.setTimeout 放在某处