是否可以使用数据 URI 将图像共享到 Facebook？

Question

我有几个画布相互重叠，合并为一个作为数据 URI。一切正常，我可以将合成图像显示在页面上，但我需要的另一个功能是创建 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 或源参数中的 multipart/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 */
      }
    }
);