5

我有几个相互放置的画布，它们合并为一个作为数据 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！有什么想法可以完成分享吗？

4

1 回答 1

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 */
      }
    }
);
于 2014-09-11T20:09:45.587 回答