CODEWITHSUNDEEP
phphtmlcanvas
SEU
SEU

Reputation: 1390

HTML5 Save canvas to PNG

I am following this example to save the canvas to a PNG file. http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/

My problem: The downloaded file is corrupt and when I open it in notepad, it has this pattern:

  1. HTML CODE (Correspoding to the PHP file)
  2. ASCII CHARACTERS (which I thought corresponded to the PNG file)
  3. <body><html>

If I remove #1 and #3 and save the file locally, I get a valid PNG image.

I am doing exactly what the example above says, but my results are different. Why would the dataURL have any other info. other than the canvas itself?

Thanks.

Edit

<?php
$imdata = $_POST["imgdata"];
//run this code only when there is long POST data
if(strlen($imdata)>1000) {
        //removing the "data:image/png;base64," part
        $imdata =  substr($imdata,strpos($data,",")+1);
        // put the data to a file
        file_put_contents('image.png', base64_decode($imdata));
        //force user to download the image
        if(file_exists("image.png")){
                header('Content-type: image/png');
                header('Content-Disposition: attachment; filename="image.png"');
                readfile('image.png');
        }
}
?>

Upvotes: 1

Views: 9620

Answers (2)

k4mars
k4mars

Reputation: 11

This worked for me -

function SaveCanvasToFile(myFileName) 
{
   var link = document.createElement('a');
   link.textContent = 'download image';
   link.href = myCanvas.toDataURL('image/png', 1.0);
   link.download = myFileName;
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);    
}

This has the advantage that the file doesn't have to go to the server and then back down again.

Upvotes: 1

Paul Aldred-Bann
Paul Aldred-Bann

Reputation: 6020

When you save the canvas in HTML5 you end up with a base64 string, at the start of this string is specific information about the image format. You will need to strip this off, if you wish to save the base64 for conversion to a hard file later. If you want to redraw the image onto a canvas (or some image control) you will need to prepend this information again.

Here's how you save your file:

var dataURL = document.getElementsByTagName("canvas")[0].toDataURL("image/png");

// strip off invalid data for saving
dataURL = dataURL.replace("data:image/png;base64,", "");

Now you can just convert your base64 string to an image and save to a hard file when you need to. If you want to display this image on a canvas again, here's how you do it:

function displayImage(base64string) {
    var canvas = document.getElementsByTagName("canvas")[0];
    var context = canvas.getContext("2d");
    var image = new Image();

    // prepend the required image info again
    image.src = "data:image/png;base64," + base64string;

    image.onload = function() {
        context.drawImage(image, 0, 0);
    }
}

Upvotes: 5

Related Questions