StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHTML5 canvas - Sharing saved image to social media
text
Body
copied!<p>Thank you for taking your time to read this post.</p> <p>i have looked through endless posts on this forum, but still are unable to achieve what am after. </p> <p>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 <a href="http://addthis.com" rel="nofollow noreferrer">Addthis.com.</a></p> <p>This is what I have accomplished so far. 1. In my canvas I have a button called #btnPreview</p> <pre><code>$("#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"); }); </code></pre> <p>that opens up a lightbox popup window.</p> <ol start="2"> <li>The image is stored in <code><img id"imgPreview" src"data:image/png;base64,...."></code> when am trying to share the image with description on facebook, twitter etc it doesnt work.</li> </ol> <p>I know what the problem it, but am unable to create the javascript and php script required for this task.</p> <p>what I want to achieve is to ask this forum the best practice for this concept.</p> <p>My idea is to create a save.Php script that saves the .png file without prompts on the server or creating a fake url <code>www.example.com/image.png</code> when I press <code>#btnPreview</code> </p> <p>once the popup window loads my img url will be</p> <pre><code><img id"imgPreview" src"www.example.com/images/md5_timestamp.png"> </code></pre> <p>This is the closed example i have found <br/> <a href="https://stackoverflow.com/questions/12902190/how-to-save-and-share-canvas-html5-image-by-saving-as-link">Example 1 that leads to example 2 </a> <br/> <a href="https://stackoverflow.com/questions/11511511/how-to-save-a-png-image-server-side-from-a-base64-data-string">Example 2 save base64 </a> <br/> <a href="https://stackoverflow.com/questions/11206955/saving-canvas-as-a-png-or-jpg">Example 3 Saving canvas as JPG or PNG</a> <br/> <a href="https://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server">Example 4 Very Close to what am after - The bottom answer</a> <br/></p> <p>I hope i explained it correctly.</p> <p>Looking forward to your responds. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload