1

So i've been trying to share a link with an image that is created from a canvas.

Anyone know if this is possible since ive tried all of the suggestions from other posts.

Should also mention that the image created is randomly generated so having them on a server is not practical.

I've tried the code below, however it does not work.

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");

FB.ui({
    method: 'share_open_graph',
    action_type: 'og.shares',
    action_properties: JSON.stringify({
        object: {
            'og:url': 'webaddress',
            'og:title': 'title',
            'og:description': 'desc',
            'og:image': img,
            'og:image:width': 960,
            'og:image:height': 642,
        }
    })
}
Zyie
  • 134
  • 2
  • 12
  • that´s just a workaround that may not even work in the future, you should rather add the og image server side. – andyrandy Sep 19 '18 at 10:50
  • The issue is that the image create from the canvas is randomly generated and there are thousands of possible images. So adding them all the a server is not practical – Zyie Sep 19 '18 at 11:10
  • i understand, but og tags are for static content - you actually just need to create a dynamic url for the images, it´s no big deal. – andyrandy Sep 19 '18 at 14:58
  • got any examples of how to create a dynamic url? – Zyie Sep 19 '18 at 15:02
  • example: "someurl.php?imageid=xxxx" - the id can be a database id or some random unique code. – andyrandy Sep 19 '18 at 15:50
  • Your're going to have to explain this to me a bit more because i dont think i understand. So i create an image from the canvas then do what exactly with the dynamic url? – Zyie Sep 20 '18 at 08:28
  • store the image on your server, add some row in your database with the image url. then create a php file with dynamic og tags by getting that row from your database by id. – andyrandy Sep 20 '18 at 09:19
  • So its not possible to use the canvas image directly from the client? Are you able to upload instead of share an image from the client device? – Zyie Sep 20 '18 at 11:08
  • no, that would be weird. you are actually not sharing a picture, you are always sharing an url (that includes a picture). and that one needs to be public and static. – andyrandy Sep 20 '18 at 11:09
  • ok thank you. Im guessing that means i cant upload an image either? – Zyie Sep 20 '18 at 11:21
  • no, it´s a simple open graph image, an additional thing to the shared url. – andyrandy Sep 20 '18 at 11:57
  • do you have an example for uploading an image? I've been searching for hours trying to figure it out – Zyie Sep 20 '18 at 13:02
  • https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server – andyrandy Sep 20 '18 at 17:33
  • a lot of results if you just search for "upload image to php from canvas" with google – andyrandy Sep 20 '18 at 17:33

0 Answers0