facebook - 上传base64图像facebook图api如何使用这个脚本

Question

上传 Base64 Image Facebook Graph API 我想使用这个附加了链接的脚本我如何在我的 wordpress 帖子中使用它？我想将它用于 fbcover 照片网站。

Answer 1

看看我从各种示例中一起破解的这段代码 - 你可以使用它来将纯 base64 字符串发布到 Facebook API - 没有服务器端处理。

这是一个演示：http ://rocky-plains-2911.herokuapp.com/

此 javascript 处理 HTML5 Canvas 元素到 base64 的转换并使用 Facebook API 发布图像字符串

<script type = "text/javascript">
// Post a BASE64 Encoded PNG Image to facebook
function PostImageToFacebook(authToken) {
var canvas = document.getElementById("c");
var imageData = canvas.toDataURL("image/png");
try {
    blob = dataURItoBlob(imageData);
} catch (e) {
    console.log(e);
}
var fd = new FormData();
fd.append("access_token", authToken);
fd.append("source", blob);
fd.append("message", "Photo Text");
try {
    $.ajax({
        url: "https://graph.facebook.com/me/photos?access_token=" + authToken,
        type: "POST",
        data: fd,
        processData: false,
        contentType: false,
        cache: false,
        success: function (data) {
            console.log("success " + data);
            $("#poster").html("Posted Canvas Successfully");
        },
        error: function (shr, status, data) {
            console.log("error " + data + " Status " + shr.status);
        },
        complete: function () {
            console.log("Posted to facebook");
        }
    });

} catch (e) {
    console.log(e);
}
}

// Convert a data URI to blob
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {
    type: 'image/png'
});
}
</script>

这将处理 Facebook 身份验证并显示基本的 HTML 设置

 <script type="text/javascript">
    $(document).ready(function () {
        $.ajaxSetup({
            cache: true
        });
        $.getScript('//connect.facebook.net/en_UK/all.js', function () {
            // Load the APP / SDK
            FB.init({
                appId: '288585397909199', // App ID from the App Dashboard
                cookie: true, // set sessions cookies to allow your server to access the session?
                xfbml: true, // parse XFBML tags on this page?
                frictionlessRequests: true,
                oauth: true
            });

            FB.login(function (response) {
                if (response.authResponse) {
                    window.authToken = response.authResponse.accessToken;
                } else {

                }
            }, {
                scope: 'publish_actions,publish_stream'
            });

        });

        // Populate the canvas
        var c = document.getElementById("c");
        var ctx = c.getContext("2d");

        ctx.font = "20px Georgia";
        ctx.fillText("This will be posted to Facebook as an image", 10, 50);

    });
</script>
<div id="fb-root"></div>
<canvas id="c" width="500" height="500"></canvas>
<a id="poster" href="#" onclick="PostImageToFacebook(window.authToken)">Post Canvas Image To Facebook</a>

Answer 2

我也需要这个，并且对它周围的所有代码都不满意，因为它很长并且通常需要 jQuery。这是我从 Canvas 上传到 Facebook 的代码：

const dataURItoBlob = (dataURI) => {
    let byteString = atob(dataURI.split(',')[1]);
    let ab = new ArrayBuffer(byteString.length);
    let ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {
        type: 'image/jpeg'
    });
}
const upload = async (response) => {
    let canvas = document.getElementById('canvas');
    let dataURL = canvas.toDataURL('image/jpeg', 1.0);
    let blob = dataURItoBlob(dataURL);
    let formData = new FormData();
    formData.append('access_token', response.authResponse.accessToken);
    formData.append('source', blob);

    let responseFB = await fetch(`https://graph.facebook.com/me/photos`, {
        body: formData,
        method: 'post'
    });
    responseFB = await responseFB.json();
    console.log(responseFB);
};
document.getElementById('upload').addEventListener('click', () => {
    FB.login((response) => {
        //TODO check if user is logged in and authorized publish_actions
        upload(response);
    }, {scope: 'publish_actions'})
})

来源： http: //www.devils-heaven.com/facebook-javascript-sdk-photo-upload-from-canvas/