Совместное использование изображения, созданного из HTML-холста на FB - PullRequest
Новая
       18

Совместное использование изображения, созданного из HTML-холста на FB

0 голосов
/ 15 мая 2018

Вот с этим я уже несколько недель бьюсь головой.

Сценарий:

  1. Позволяет пользователю создавать изображения из выбранных им слоев.
  2. Преобразование изображения на холст
  3. Поделиться изображением с холста на стене в Facebook с помощью share_open_graph (вместе с изображением будет предоставлен краткий текст и заголовок)

У меня уже есть решение с использованием publish_actions , но оно было недавно удалено из API и больше недоступно.

Я использую js и html для обработки всего кода.

Проблема в том, что я могу сгенерировать изображение png из холста, но оно сохраняется как base64, а share_open_graph не позволяет использовать этот тип изображения, ему нужен прямой URL-адрес, такой как './ example.png. Я пытался использовать несколько подходов и с canvas2image, конвертировать и сохранять изображения с использованием файловой системы, но все они терпят неудачу.

Есть ли у кого-нибудь подобный сценарий и возможное решение с апреля / мая 2018 года с использованием share_open_graph ?

Мой текущий код выглядит следующим образом - он не работает при преобразовании изображения и сохраняется в файл (Uncaught (в обещании) TypeError: r.existsSync не является функцией для n (file-system.js: 30)). Но я открыт для разных решений, поскольку это явно не работает. 

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);
   }
  );
 });
};
...