HTML5 Canvas - Sharing Saved Image on Social Media

Thank you for taking the time to read this post.

I've looked through endless posts on this forum but still can't seem to achieve what after.

I created an html5 canvas that saves drawings and images of users. When a user clicks on a post, they will be prompted to create a popup (lightboxes) preview of its image with the option to share the image on social media using Addthis.com.

This is what I have done so far. 1. On my canvas, I have a button named #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");
});

      

        
        
        
      

    

which opens the lightbox popup.

2. The image is saved in <img id"imgPreview" src"data:image/png;base64,....">
   
   when I try to share the image with the description on facebook, twitter, etc, it doesn't work.

I know what the problem is, but cannot create the javascript and php script required for this task.

what i want to achieve is ask this forum for 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 creates a fake url www.example.com/image.png

when I click#btnPreview

after the popup loads, my img url will be

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

      

        
        
        
      

    

This is a closed example I found
Example 1 which leads to Example 2
Example 2: Save base64
Example 3 Save canvas as JPG or PNG
Example 4 Very close to what after - Bottom answer

I hope I have explained this correctly.

We look forward to receiving your responses.