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

Question

上传Base64图片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>