Share SVG to Facebook

Question

Users customize an SVG, and when they're satisfied, I want to give them the option of sharing the image on Facebook.

I know Facebook doesn't accept SVGs, so, after reading this question, I came up with the following using canvg:

var svgText = "<svg>" + $("#canvas2").html() + "</svg>";

canvg(document.getElementById('drawingCanvas'), svgText);

var img = document.getElementById('drawingCanvas').toDataURL("image/png");

Despite the naming of .toDataURL, img is not then a URL (at least, I don't think it is), but a >10,000-character string that beings with data:image/png;base64,....

If I then try to allow the user to share the PNG on Facebook,

window.FB.ui({
     href: "https://dna.land",
     method: 'feed',
     name: 'name',
     link: "dna.land",
     picture: img,
     caption: 'mywebsite.com',
     description: "description",
     message: "message"
}, function(response) {});

the error message I get is "the parameter href" is required (which I'm clearly supplying... maybe img is too long and the JSON is being truncated?), though I have also seen that I'm not supplying a valid URL for picture.

How can I share the image data on Facebook?

If there's no way to do this with the raw, base 64 encoding of the PNG, I'm not averse to temporarily storing the PNG file on a server. But, ideally, I'd only store for 24 hours, or a few months, or some minor span of time, and then be able to delete it without the user's post disappearing. Is that possible?

Answer 1

Despite the naming of .toDataURL, img is not then a URL (at least, I don't think it is), but a >10,000-character string that beings with data:image/png;base64,....

This is what exactly Data URI means! and the function name toDataURL() is not misleading.

In your case what you need to do is that you need to convert the Base64 encoded image (represented by the Data URI) into a file and upload it somewhere (possibly on your own server or any Cloud Storage provider like Amazon S3 or Google Cloud Storage), then share that url on Facebook.

On your own server:
If you are uploading it to your own server then you can simply POST the Data URL via ajax, convert it to an image and return the URL of that image. To convert Base64 image you need to look for specific ways on how to do it with your backend language/system. For example, to convert Base64 encoded image to file in

• PHP: look at this answer
• Python: look at this answer
• NodeJS: look at this answer

For any other backend just do a Google Search and you should find ways on how to do it.

Uploading to Third-party Cloud Storage services:
If you want to upload the image to any Third-party service, you can get a Blob object from the canvas by using Canvas.toBlob() function and upload the resulting blob to the provider (possibly by using a Javascript / REST API provided by them). AFAIK, many popular Cloud Storage providers will allow you to upload a blob with appropriate MIME type, though you should always check for support.