How to save a PNG image server-side, from a base64 data URI

by

I’m using Nihilogic’s “Canvas2Image” JavaScript tool to convert canvas drawings to PNG images.
What I need now is to turn those base64 strings that this tool generates, into actual PNG files on the server, using PHP.

In short, what I’m currently doing is to generate a file on the client side using Canvas2Image, then retrieve the base64-encoded data and send it to the server using AJAX:

// Generate the image file
var image = Canvas2Image.saveAsPNG(canvas, true);   

image.id = "canvasimage";
canvas.parentNode.replaceChild(image, canvas);

var url="hidden.php",
data = $('#canvasimage').attr('src');

$.ajax({ 
    type: "POST", 
    url: url,
    dataType: 'text',
    data: {
        base64data : data
    }
});

At this point, “hidden.php” receives a data block that looks like data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABE…

From this point on, I’m pretty much stumped. From what I’ve read, I believe that I’m supposed to use PHP’s imagecreatefromstring function, but I’m not sure how to actually create an actual PNG image from the base64-encoded string and store it on my server.
Please aid!

16 Answers
16

Leave a Comment