Facebook Share Data URI Image

Question

I have an application in which users can interactively create elements on an HTML5 canvas. I would like to share the canvas image via Facebook.

I planned to create a dynamic page and pass in the data URI, but Facebook does not accept the image data URI and requires an absolute path to the image.

I really do not want to go along the path of storing the image on the server, even temporarily, but I'm afraid that this is my only option? Is there another way I should explore?

Answer 1

I found a good code for this, it looks great. You can also see who is looking for twiter in "How to send an image (canvas) to facebook, twiter"

// Canvas Object var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // load image from data url var imageObj = new Image(); imageObj.onload = function() { ctx.drawImage(this, 0, 0); }; imageObj.src = 'panda_dark.png'; function dataURItoBlob(dataURI) { var byteString = atob(dataURI.split(',')[1]); var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ab], {type: 'image/png'}); } $('#shareFB').click(function () { var data = $('#canvas')[0].toDataURL("image/png"); try { blob = dataURItoBlob(data); } catch (e) { console.log(e); } FB.getLoginStatus(function (response) { console.log(response); if (response.status === "connected") { postImageToFacebook(response.authResponse.accessToken, "Canvas to Facebook/Twitter", "image/png", blob, window.location.href); } else if (response.status === "not_authorized") { FB.login(function (response) { postImageToFacebook(response.authResponse.accessToken, "Canvas to Facebook/Twitter", "image/png", blob, window.location.href); }, {scope: "publish_actions"}); } else { FB.login(function (response) { postImageToFacebook(response.authResponse.accessToken, "Canvas to Facebook/Twitter", "image/png", blob, window.location.href); }, {scope: "publish_actions"}); } }); }); function postImageToFacebook(token, filename, mimeType, imageData, message) { var fd = new FormData(); fd.append("access_token", token); fd.append("source", imageData); fd.append("no_story", true); // Upload image to facebook without story(post to feed) $.ajax({ url: "https://graph.facebook.com/me/photos?access_token=" + token, type: "POST", data: fd, processData: false, contentType: false, cache: false, success: function (data) { console.log("success: ", data); // Get image source url FB.api( "/" + data.id + "?fields=images", function (response) { if (response && !response.error) { //console.log(response.images[0].source); // Create facebook post using image FB.api( "/me/feed", "POST", { "message": "", "picture": response.images[0].source, "link": window.location.href, "name": 'Look at the cute panda!', "description": message, "privacy": { value: 'SELF' } }, function (response) { if (response && !response.error) { /* handle the result */ console.log("Posted story to facebook"); console.log(response); } } ); } } ); }, error: function (shr, status, data) { console.log("error " + data + " Status " + shr.status); }, complete: function (data) { //console.log('Post to facebook Complete'); } }); }