Search code examples
javascriptfacebookcanvassharedata-uri

Share data uri image on facebook

I have HTML canvas which i export into data uri image. Now i want to share this image as easy as possible (without creating FB apps and authentication tokens) on Facebook time line by clicking on custom link on my page.

I have tried something like this:

Image generation:

var dataUrl = context.canvas.toDataURL("image/jpeg");

Sharing link (onClick):

window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(dataUrl)+'&t='+encodeURIComponent('Some text'),'sharer','toolbar=0,status=0,width=626,height=436');

When i click the link in Safari I got Safari cannot open page ... (NSPOSIXErrorDomain:100)

How can I easily share data uri image via Facebook sharer URL (or some other way)?

Thanks for answers!

Solution

  • You can decode the DataURI to a share-able URL using this nifty service:

    http://aminariana.github.io/data-uri-to-img-url/

    This service takes a Base64 encoded DataURI via a POST request, and responds with a URL representing the decoded image. It will wrap your image in a page with opengraph META tags in real time.