Share SVG to Facebook
Users are customizing the SVG, and when satisfied, I want to give them the option to share the image on Facebook.
I know Facebook does not accept SVG, so after reading this question I came up with the following with canvg
:
var svgText = "<svg>" + $("#canvas2").html() + "</svg>";
canvg(document.getElementById('drawingCanvas'), svgText);
var img = document.getElementById('drawingCanvas').toDataURL("image/png");
Despite the name .toDataURL
, img
it is not a URL (at least I don't think it is), but -> 10,000 character string that creatures 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 I get is the "href parameter" (which I explicitly supply ... maybe img
too long and the JSON truncated?), although I also saw m not specifying a valid URL for picture
.
How can I share image data on Facebook?
If there is no way to do it with raw, basic 64-bit PNG encoding, I would like to temporarily store the PNG file on the server. But, ideally, I would only keep 24 hours or a few months or a short period of time and then delete it without the user's message disappearing. Is it possible?
source to share
Despite the name .toDataURL, img is not a URL (at least I don't think it is), but -> 10000 character string, which is creature with data: image / png; base64, ....
This is what exactly the Data URI means! and the function name is toDataURL()
not misleading.
In your case, you need to convert the Base64 encoded image (represented by the URI) to a file and upload it somewhere (perhaps on your own server or any cloud storage provider like Amazon S3 or Google Cloud Storage), then pass that URL to Facebook ...
On your own server:
If you upload it to your own server, you can simply POST the data url via ajax, convert it to an image, and return the url of that image. In order to convert an image to Base64, you need to find specific ways of how to do it using your backend language / system. For example, to convert a Base64 encoded image to a file in
- PHP: see this answer
- Python: see this answer
- NodeJS: See 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 an image to a third party service, you can get the Blob object using Canvas.toBlob () and upload the resulting blob to the provider (possibly using the Javascript / REST API they provided). AFAIK, many popular cloud storage providers will allow you to upload blobs with the appropriate MIME type, although you should always check for support.
source to share