Unable to get complete image file from Canvas toDataUrl in chrome
===

I am trying to download image file(like save as) from server through a php file. On click of "Save button" in my html page I am using canvas' toDataUrl and sending it to the php file. I am able to save complete image properly in FF & Opera but not in chrome. In chrome, only half of the image is getting saved.

HTML Code

    <form id="frm" method="post" action="php/saveimg.php" style="display:none">
    <input type="submit"  value="submit"/>
    <input type="text" name="data" id="data" />
    </form>

JS Code:

    $("#saveimg").click(function(){
		
		var dataurl=document.getElementById('mycanvas').toDataURL();
		$("#data").val(dataurl);
		$("#frm").trigger("submit");
	});
	
PHP Code(saveimage.php):

    <?php
    $data = $_POST['data'];
    //removing the "data:image/png;base64," part
    $uri =  substr($data,strpos($data,",")+1);
    file_put_contents('wow.png', base64_decode($uri));
    if(file_exists('wow.png')){
        header("Content-Type: application/force-download");
        header('Content-Disposition: attachment; filename="wow.png"');
        readfile('wow.png');
     }
     ?>

Let me know if I am doing something wrong here.