HTML5 canvas - Sharing saved image to social media

Question

Thank you for taking your time to read this post.

i have looked through endless posts on this forum, but still are unable to achieve what am after.

I have created a html5 canvas that save users drawings and images. When the user press publish, he/she will be prompted with a popup frame (lightbox) previewing her image, with the option of sharing the image on social networks using Addthis.com.

This is what I have accomplished so far. 1. In my canvas I have a button called #btnPreview

$("#btnPreview").click(function (event) {
    canvas.deactivateAll();
    var strDataURI = canvas.toDataURL("png");
    var proporcao = 1;
    var proporcaoW = 500 / canvas.width;
    var proporcaoH = 400 / canvas.height;
    if (proporcaoW < proporcaoH) {
        proporcao = proporcaoW;
    } else {
        proporcao = proporcaoH;
    }
    $("#addthis_shareable").width(canvas.width * proporcao).height(canvas.height * proporcao).attr("src", strDataURI);
    //  $("#imgPreview").width(canvas.width*proporcao).height(canvas.height*proporcao).attr("src", strDataURI);
    $("#modalPreview").modal("show");
});

that opens up a lightbox popup window.

2. The image is stored in <img id"imgPreview" src"data:image/png;base64,...."> when am trying to share the image with description on facebook, twitter etc it doesnt work.

I know what the problem it, but am unable to create the javascript and php script required for this task.

what I want to achieve is to ask this forum the best practice for this concept.

My idea is to create a save.Php script that saves the .png file without prompts on the server or creating a fake url www.example.com/image.png when I press #btnPreview

once the popup window loads my img url will be

<img id"imgPreview" src"www.example.com/images/md5_timestamp.png">

This is the closed example i have found
Example 1 that leads to example 2
Example 2 save base64
Example 3 Saving canvas as JPG or PNG
Example 4 Very Close to what am after - The bottom answer

I hope i explained it correctly.

Looking forward to your responds.

Answer 1

Check this: Fabric.js canvas.toDataURL() sent to PHP by Ajax As you can see, you can send your PNG base64 data of your canvas and generate the image in PHP in server side. This is the code that you can use in PHP in server side: https://gist.github.com/rodrigopandini/2149853