Question

Upload 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/

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

2 个答案: