最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

php - HTML5 canvas - Sharing saved image to social media - Stack Overflow

programmeradmin4浏览0评论

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.

This is what I have acplished 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/image.png when I press #btnPreview

once the popup window loads my img url will be

<img id"imgPreview" src"www.example/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.

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

This is what I have acplished 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./image.png when I press #btnPreview

once the popup window loads my img url will be

<img id"imgPreview" src"www.example./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.

Share Improve this question edited May 23, 2017 at 10:29 CommunityBot 11 silver badge asked Feb 13, 2013 at 6:28 CreativeflyCreativefly 611 silver badge3 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 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./rodrigopandini/2149853

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.
发布评论

评论列表(0)

  1. 暂无评论