Facebook Share Data URI Image

Question

Ho un'applicazione in cui gli utenti possono progettare interattivamente elementi su un canvas HTML5. Mi piacerebbe condividere l'immagine della tela tramite Facebook.

Stavo progettando di creare una pagina dinamica e passare un URI di dati ma Facebook non accetta un'immagine URI di dati e richiede un percorso di immagine assoluto.

Davvero non voglio andare giù per il percorso di memorizzazione dell'immagine sul server, anche temporaneamente, ma temo che questa sia la mia unica opzione? C'è un'altra strada che dovrei cercare?

Answer 1

Ho trovato un bel codice per quello, sembra a posto. Puoi anche vedere chi cerca twiter a "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'); 
     } 
    }); 
}