Sharing image generated from html canvas on FB

Question

This one I've been banging my head against for a few weeks now.

Scenario:

Let user generate an image out of layers they select
Convert image to canvas
Share image from canvas on facebook wall using share_open_graph (along with the image, a short text and title will be shared)

I've already had a solution in place using publish_actions but that was recently removed from the API and is no longer available.

I am using js and html for all code handling.

The issue is that I can generate a png image from the canvas but that is saved as base64 and share_open_graph doesn't allow this type of image, it needs a straight forward url such as './example.png'. I have tried using several approaches and with canvas2image, converting and saving image using file-system but all of these fail.

Does anyone have similar scenario and possible solution from April/May 2018 using share_open_graph ?

My current code looks like this - it fails at the image conversion and save to a file (Uncaught (in promise) TypeError: r.existsSync is not a function at n (file-system.js:30)). But I am open to different solutions as this is clearly not working.

html2canvas(original, { width: 1200, height: 628 
}).then(function(canvas) 
{
fb_image(canvas);
});
var fb_image = function(canvas) {
canvas.setAttribute('id', 'canvas-to-share');
document.getElementById('img-to-share').append(canvas);
fbGenerate.style.display = 'none';
fbPost.style.display = 'block';
var canvas = document.getElementById('canvas-to-share');
var data = canvas.toDataURL('image/png');

var encodedPng = data.substring(data.indexOf(',') + 1, data.length);
var decodedPng = base64.decode(encodedPng);

const buffer = new Buffer(data.split(/,\s*/)[1], 'base64');
pngToJpeg({ quality: 90 })(buffer).then(output => 
fs.writeFile('./image-to-fb.jpeg', output));

var infoText_content = document.createTextNode('Your image is being 
posted to facebook...');
infoText.appendChild(infoText_content);

// Posting png from imageToShare to facebook

fbPost.addEventListener('click', function(eve) {
  FB.ui(
    {
      method: 'share_open_graph',
      action_type: 'og.shares',
      href: 'https:example.com',
      action_properties: JSON.stringify({
        object: {
          'og:url': 'https://example.com',
          'og:title': 'My shared image',
          'og:description': 'Hey I am sharing on fb!',
     'og:image': './image-to-fb.jpeg',
     },
    }),
   },
   function(response) {
    console.log(response);
   }
  );
 });
};

Sharing image generated from html canvas on FB

0 Answers0