6

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.

  1. 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.

Community
  • 1
  • 1
Creativefly
  • 61
  • 1
  • 3

2 Answers2

4

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

Community
  • 1
  • 1
rodrigopandini
  • 945
  • 1
  • 7
  • 18
2

There could be 2 scenarios:

  1. To be able to share a photo/post URL to Facebook, you'll need to have the photo saved to your server first ( or atleast served from your application )
  2. If you wish to post that as an image ( photo ) on Facebook, you'll need to make an OAuth2.0 flow such that your application posts the photo to Facebook on the user's behalf.
sbose
  • 1,791
  • 5
  • 24
  • 46
  • Thank you SHOUBHIK, Im will create a temporary directory where all the images are stored. now is just to be able to create that button can can store the image in the Temp directory on-the-fly. – Creativefly Feb 13 '13 at 07:04
  • Temporary directory on the server. Do you wish to post as a photo or link? – sbose Feb 13 '13 at 07:10
  • I would like to post is as a photo. thank you for your reply. @shoubhik bose – Creativefly Feb 13 '13 at 07:32
  • Then you'll need to make the user signup using OAuth2.0 ( check developers.facebook.com ) – sbose Feb 13 '13 at 08:00
  • You could vote up answers if you think they are close to a solution :) – sbose Feb 14 '13 at 09:57