Canvas .toDataURL() returns partially corrupted image

Question

We have a web application that (very intermittently) is returning a partially corrupted PNG image data URL. The image has a large black section covering some of the image but not all of it. These images are customer signatures.
For example:

We are using the signature pad component from this. The image URL is returned using the getSignatureImage() routine.

The only thing I have seen from the access logs seems to show the affected requests coming from "Samsung Galaxy Tab" devices, but using Chrome 59. However other requests from the same devices work OK.

Any help appreciated.

Answer 1

I think it is not a memory issue. When image consumes too much memory, an image will by simply black (empty pixels rgb(0,0,0)). Try to get blob from canvas - canvas.toBlob(function(blob) {}). Probably your image not loaded or draw yet. Try to put window.setTimeout somewhere before you get the image data (base64 or blob)

Answer 2

We have now confirmed that the issue was device dependant.

The end users affected have changed from older Samsung Galaxy Tab 4 devices to Tab S2 devices. The problem no longer occurs.

It appears to have been a string length limitation on the older devices.

Thanks for the help!