canvas.toDataURL to Wordpress Library

Question

am using fabricjs to edit/create image... after creating image should upload to WordPress library. am struck with this i can get

dataUrl = canvas.toDataURL("image/png");
    //alert(dataUrl);
    setTimeout(function(){
        canvas.backgroundColor="white";
        canvas.setOverlayImage('overlay.png', canvas.renderAll.bind(canvas));
    },1000);

i can see preview in popup also.. but i was struck to convert to image and upload it to WordPress library without downloading.

Thanks

Answer 1

You're going to need to do some server side PHP processing for this, but that's fine, because Wordpress uses PHP.

Something like this should do it:

<?php
// send.php, place in wordpress root
$dir = getcwd(); // get the current working directory
$now = date("U");  // create a timestamp to append to the filename
$imgstring = $_POST['data'];
$imgstring = base64_decode($imgstring);
file_put_contents("$dir/wp-content/uploads/image-$now.png", $imgstring);
?>

And in your javascript:

function sendtowordpress()
{
dataUrl = canvas.toDataURL("image/png");
dataUrl = dataUrl.replace(/^data:image\/(png|jpg);base64,/, "");
$.post("send.php?data="+dataUrl);
}