.toDataURL() from Safari to PHP is rendering full white image (not drawn area)

Question

Summary: Say I draw a white smiley face with a canvas element in a browser. When I generate an image string to POST to the PHP server from this canvas via js/ajax (with toDataUrl('image/png') ) in Safari, the image created on the server with PHP functions imagecreatefromstring() and imagepng() is the right height and width, but it is all white, instead of the smiley face from the canvas in the browser.

I am stripping off the "data:image/png;base64," from the string before base64_decoding and saving to the image file.

This method works flawlessly in FF and Chrome.

The base64 encoded string that toDataUrl is generating in js is verified to be the same string that the server is receiving, so it's not getting cut off in the transfer.

When I load the image string from toDataUrl() into any browser, it displays the drawn image as expected. However, the newimage.png that is generated on the server is entirely white.

Is there something different that Safari does to encode images into the base64 string that needs to be accounted for on the server? If so, it must not be too drastic as any browser is able to render the correct smiley face from the image string.

Please feel free to let me know if you need more info.

Thank you in advance!

EDIT: could it be related to how Safari stores transparency?

Answer 1

Have you tried exporting an image without transparency? You might consider filling the background with a solid color before calling toDataURL.

var ctx = document.getElementById('my_canvas').getContext('2d');
var w = $("#my_canvas").width();
var h = $("#my_canvas").height();
ctx.globalCompositeOperation = 'lighter';
ctx.fillStyle = "#000";
ctx.fillRect( 0, 0, w, h );

Something like this should produce a more consistent result.