Question

我有幾個畫布定位在彼此合併成一個數據URI。一切工作正常，我可以得到複合圖像顯示在頁面上，但我需要的其他funcitonality是創建的URI，然後分享到Facebook。我想盡量做到這一點，而不發送到服務器，並做到所有客戶端。

的代碼是沒有必要的問題，但如果你想看到它

<ul class="button-group even-2"> 
         <li><span id='merge-canvas' class="button expand">Save Image</span></li> 
         <li><span id='share-facebook' class="button expand facebook" >Share</span></li> 
</ul> 

使用JavaScript這樣看。

// DROPBOX AND FILE READER 

function noopHandler(evt) { 
     evt.stopPropagation(); 
     evt.preventDefault(); 
    } 

    function drop(evt) { 
     evt.stopPropagation(); 
     evt.preventDefault(); 

    var files = evt.dataTransfer.files; 
    var count = files.length; 

    // Only call the handler if 1 or more files was dropped. 
    if (count > 0) { 

    } 
     handleFiles(files); 

} 

function handleFiles(files) { 
    var file = files[0]; 

    document.getElementById("droplabel").innerHTML = "Processing " + file.name; 

    var reader = new FileReader(); 

    // init the reader event handlers 
    reader.onloadend = handleReaderLoadEnd; 

    // begin the read operation 
    reader.readAsDataURL(file); 
} 

function handleReaderLoadEnd(evt) { 

    // basically clears and redraws the face canvas on load of the users image 
    document.getElementById("droplabel").innerHTML = "Picture Added Successfully!"; 
    var $canvas = $('canvas'); 
    ctx = $canvas[0].getContext('2d'); 
    face = new Image(); 
    face.onload = function() { 
     ctx.drawImage(face, 0, 0, 500, (face.height/face.width) * 500); 
     } 

    face.src = evt.target.result; 
    return face; 
} 

function initializeDropbox() { 
    var dropbox = document.getElementById("dropbox") 

    // adds different events for the dropbox and points to the relevant function 

    dropbox.addEventListener("dragenter", noopHandler, false); 
    dropbox.addEventListener("dragexit", noopHandler, false); 
    dropbox.addEventListener("dragover", noopHandler, false); 
    dropbox.addEventListener("drop", drop, false); 
} 

它產生一個非常長的數據URI！ 任何想法來完成分享？

Answer 1

您可以在源參數通過URL或者多/ form-data發佈的圖像：

https://developers.facebook.com/docs/graph-api/reference/v2.1/user/photos

/* make the API call */ 
FB.api(
    "/me/photos", 
    "POST", 
    { 
     "source": "{image-data}" 
    }, 
    function (response) { 
     if (response && !response.error) { 
     /* handle the result */ 
     } 
    } 
);