canvas toDataUrl() 无法在 android 设备上工作

Question

我正在开发使用 Pixi（2d 渲染库）的 Cordova 混合 Web 应用程序。应用程序创建了一些 canvas 需要转换并在服务器上保存为 PNG 图像。

编辑（代码）：

var canvasImg = $('#canvas')[0].toDataURL("image/png");
$("#canvas-img").attr("src", canvasImg );

（这只是我用来测试 toDataURL() 的代码示例）

toDataURL() 在 Web 应用程序 运行ning PC 浏览器中运行良好。它正确地转换图像并在#canvas-img.

中显示图像

但是，当我 运行 Cordova 应用程序（在 Android 上）或使用 Chrome 浏览器（在 Android 上）打开它时，然后 toDataURL () 创建空像素虚拟图像。

我在 Android 版本 < 2.3 中读到有关 toDataURL() 的问题，但我的 android 是版本 6.0 !!

• 我的问题是否与 toDataURL() 在 Android 设备或​​其他设备上的问题有关？

是否有 toDataURL() 无法在 Android 设备上工作的解决方法？

我尝试使用：

• https://github.com/AdamMerrifield/todataurl-png-js

• https://github.com/hongru/canvas2image

• https://github.com/gillyb/reimg

（也许我搞砸了一些东西，但没用）

如果有人找到解决此问题的方法，请提供帮助！

此致， 约瑟普

Answer 1

终于来了！成功 =)

---

toDataURL() 没有问题，除非你的 Android 版本小于 2.3。

但是，为了向后兼容，我实现了 todataurl-png-js（以防万一）。

---

解决方法

我的 Pixi 渲染器是 PIXI.autoDetectRenderer，它使用 WebGL 渲染器。 这就是为什么 toDataURL() 总是导致空的透明虚拟图像。

• 我将渲染器更改为 PIXI.CanvasRenderer，现在它可以毫无问题地将 canvas 转换为图像！

希望对遇到同样问题的人有所帮助！

:: 欢呼::

约瑟普