"canvas.toDataURL("image/png")" Not Working Properly In Firefox

I have a web page with file input field.I wanted to , Upload a image file. create image element using uploaded image. draw it on canvas get 'DataURL' of canvas. This process work

Solution 1:

Wait for the image to load.

img.onload = function(){
    var canvas = ...
};
img.src = e.target.result;

Please note that this is a copy-n-paste of @kaiido's comment, as he refused to repost it as an answer. Credit goes to him.

Solution 2:

I faced the same issue, You can fix this using Javascript shown as below

        var canvas=document.getElementById(canvasId);
        var href=canvas.toDataURL("image/png");
        var windowtab=window.open('about:blank','image from canvas');
        windowtab.document.write("<img src='"+href+"' alt='from canvas'/>");