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

Question

我有几个 Canvas 相互放置，合并为一个作为数据 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 或 source 参数中的 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 */
      }
    }
);