Facebook Share Data URI Image

Question

Tôi có một ứng dụng mà người dùng có thể thiết kế tương tác các yếu tố trên canvas HTML5. Tôi muốn chia sẻ hình ảnh canvas qua Facebook.

Tôi đã lên kế hoạch tạo trang động và chuyển vào URI dữ liệu nhưng Facebook không chấp nhận hình ảnh URI dữ liệu và yêu cầu đường dẫn hình ảnh tuyệt đối.

Tôi thực sự không muốn đi xuống con đường lưu trữ hình ảnh trên máy chủ, thậm chí tạm thời, nhưng tôi sợ rằng đây là lựa chọn duy nhất của tôi? Có cách nào khác mà tôi nên nghiên cứu không?

Answer 1

Tôi đã tìm thấy một số mã đẹp cho điều đó, có vẻ ổn. Bạn cũng có thể xem ai sẽ tìm kiếm số twiter tại "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'); 
     } 
    }); 
}