canvas toDataUrl() not working on android devices workarund

Question

I'm developing Cordova hybrid Web application that uses Pixi (2d rendering library). Application creates some canvas that needs to be converted and saved on the server as PNG image.

EDIT (code):

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

( this is just example of code I'm using to test toDataURL() )

toDataURL() is working fine in Web application running PC browser. It converts image correctly and shows the image in #canvas-img.

But, when I run Cordova App (on Android) or open it using Chrome Browser (on Android), then toDataURL() creates empty pixels dummy image.

I read about problems with toDataURL() in Android version < 2.3, but my android is version 6.0 !!

• Is my problem related with this toDataURL() issues on Android devices or something else?

Is there a workaround for toDataURL() not working on Android devices?

I tried to use:

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

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

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

(maybe I mess something but that didn't worked)

If someone find a workaround this problem please be kind to help!

Regards, Josip

Answer 1

Finally! Success =)

---

There wasn't a problem in toDataURL(), unless your Android version is < 2.3.

But, for backward compatibility, I've implemented todataurl-png-js (just in case).

---

Workaround

My Pixi renderer was PIXI.autoDetectRenderer and it used WebGL renderer. That's why toDataURL() always results in empty transparent dummy image.

• I changed renderer to PIXI.CanvasRenderer and now it converts canvas to image without problem!

I hope this will help someone with the same problems!

:: CHEERS ::

Josip