canvas toDataUrl（）在Android设备上不起作用

Question

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

编辑 （代码）：

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

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

toDataURL（）在运行PC浏览器的Web应用程序中运行良好。 它可以正确转换图像并在＃canvas-img中显示图像。

但是，当我运行Cordova App（在Android上）或使用Chrome浏览器（在Android上）打开它时， toDataURL（）会创建空像素的虚拟图像。

我在Android版本<2.3中阅读了有关toDataURL（）的问题，但我的Android版本是6.0！

• 我的问题与Android设备上的toDataURL（）问题有关吗？

有没有针对toDataURL（）在Android设备上不起作用的解决方法？

我尝试使用：

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

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

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

（也许我搞砸了，但是那没用）

如果有人找到解决方法，请解决此问题！

问候，乔西普

Answer 1

最后！ 成功=）

---

除非您的Android版本小于2.3，否则toDataURL（）中没有问题。

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

---

解决方法

我的Pixi渲染器是PIXI.autoDetectRenderer ，它使用了WebGL渲染器。 这就是为什么toDataURL（）始终会生成空的透明虚拟图像的原因。

• 我将渲染器更改为PIXI.CanvasRenderer ，现在它将画布转换为图像没有问题！

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

::干杯::

乔西普