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在source参数中发布图像：

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 */
      }
    }
);

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

1 个答案: