Facebook Share Data URI Image

Question

У меня есть приложение, в котором пользователи могут интерактивно создавать элементы на холсте HTML5. Я хотел бы поделиться изображением холста через Facebook.

Я планировал создать динамическую страницу и передать в URI данных, но Facebook не принимает изображение URI данных и требует абсолютного пути изображения.

Я действительно не хочу идти по пути хранения изображения на сервере, даже временно, но я боюсь, что это мой единственный вариант? Есть ли еще один путь, который я должен исследовать?

Answer 1

Я нашел хороший код для этого, отлично выглядит. Вы также можете посмотреть, кому это нужно, на twitter at "How to post image (canvas) to the facebook , twiter"

// Canvas Object 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

// load image from data url 
var imageObj = new Image(); 
imageObj.onload = function() { 
ctx.drawImage(this, 0, 0); 
}; 

imageObj.src = 'panda_dark.png'; 

function dataURItoBlob(dataURI) { 
    var byteString = atob(dataURI.split(',')[1]); 
    var ab = new ArrayBuffer(byteString.length); 
    var ia = new Uint8Array(ab); 
    for (var i = 0; i < byteString.length; i++) { 
     ia[i] = byteString.charCodeAt(i); 
    } 
    return new Blob([ab], {type: 'image/png'}); 
} 

$('#shareFB').click(function() { 
    var data = $('#canvas')[0].toDataURL("image/png"); 
    try { 
     blob = dataURItoBlob(data); 
    } catch (e) { 
     console.log(e); 
    } 
    FB.getLoginStatus(function (response) { 
     console.log(response); 
     if (response.status === "connected") { 
      postImageToFacebook(response.authResponse.accessToken, "Canvas to Facebook/Twitter", "image/png", blob, window.location.href); 
     } else if (response.status === "not_authorized") { 
      FB.login(function (response) { 
       postImageToFacebook(response.authResponse.accessToken, "Canvas to Facebook/Twitter", "image/png", blob, window.location.href); 
      }, {scope: "publish_actions"}); 
     } else { 
      FB.login(function (response) { 
       postImageToFacebook(response.authResponse.accessToken, "Canvas to Facebook/Twitter", "image/png", blob, window.location.href); 
      }, {scope: "publish_actions"}); 
     } 
    }); 
}); 


function postImageToFacebook(token, filename, mimeType, imageData, message) { 
    var fd = new FormData(); 
    fd.append("access_token", token); 
    fd.append("source", imageData); 
    fd.append("no_story", true); 

    // Upload image to facebook without story(post to feed) 
    $.ajax({ 
     url: "https://graph.facebook.com/me/photos?access_token=" + token, 
     type: "POST", 
     data: fd, 
     processData: false, 
     contentType: false, 
     cache: false, 
     success: function (data) { 
      console.log("success: ", data); 

      // Get image source url 
      FB.api(
       "/" + data.id + "?fields=images", 
       function (response) { 
        if (response && !response.error) { 
         //console.log(response.images[0].source); 

         // Create facebook post using image 
         FB.api(
          "/me/feed", 
          "POST", 
          { 
           "message": "", 
           "picture": response.images[0].source, 
           "link": window.location.href, 
           "name": 'Look at the cute panda!', 
           "description": message, 
           "privacy": { 
            value: 'SELF' 
           } 
          }, 
          function (response) { 
           if (response && !response.error) { 
            /* handle the result */ 
            console.log("Posted story to facebook"); 
            console.log(response); 
           } 
          } 
         ); 
        } 
       } 
      ); 
     }, 
     error: function (shr, status, data) { 
      console.log("error " + data + " Status " + shr.status); 
     }, 
     complete: function (data) { 
      //console.log('Post to facebook Complete'); 
     } 
    }); 
}