上传图片的Base64 Facebook的图形API [英] Upload Base64 Image Facebook Graph API

查看:149
本文介绍了上传图片的Base64 Facebook的图形API的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想一个base64图像上传到使用Node.js的一个Facebook页面我设法让上传与所有的多部分数据等我应该阅读从文件系统文件工作(即使用fs.readFileSync('C:\\ A.JPG')

但是,如果我使用的base64 EN codeD映像,并尝试上载它,它给我以下错误: {错误:{消息:(#1)出现未知错误,类型:OAuthException,code:1}}

我试图将其转换为二进制由新的缓冲区(b64string的base64'); 和上载的,但没有运气

我一直在挣扎这3天,所以anyhelp将大大AP preciated。

编辑:如果有人也知道我如何能为Base64转换为二进制并成功上传,这也将工作对我来说

编辑:code段

  VAR postDetails = +分隔符+ newlineConstant内容处置:表格数据;名称=的access_token'+ newlineConstant + newlineConstant +的accessToken + newlineConstant +分隔符;postDetails = postDetails + newlineConstant +'内容处置:表格数据; NAME =消息'+ newlineConstant + newlineConstant +消息+ newlineConstant;//添加图像信息
VAR fileDetailsS​​tring ='';
变种索引= 0;
VAR multipartBody =新的缓冲区(0);
images.forEach(功能(currentImage){
    fileDetailsS​​tring = fileDetailsS​​tring +分隔符+ newlineConstant +'内容处置:文件; NAME =源;文件名=形象+指数+''+ newlineConstant +'内容类型:图像/ JPEG'+ newlineConstant + newlineConstant;
    指数++;    multipartBody = Buffer.concat([multipartBody,新的缓冲区(fileDetailsS​​tring),currentImage]); //这是如果Bianry数据是在过去,我会用什么    currentImage =新的缓冲区(currentImage.toString('的base64'),'的base64'); //以下行是什么(如果我是用二进制/ BASE64适当的行会启用/禁用)我会用在传递的base64形象
    multipartBody = Buffer.concat([multipartBody,新的缓冲区(fileDetailsS​​tring),currentImage]);
});multipartBody = Buffer.concat([新的缓冲​​区(postDetails),multipartBody,新的缓冲区(页脚)]);


解决方案

上面的code并没有为我工作相当(后缺少逗号键入:POST,和数据的URI BLOB函数报告的错误我得到了以下code在Firefox和Chrome的工作:

 函数PostImageToFacebook(的authToken)
{
    VAR帆布=的document.getElementById(C);
    VAR为imageData = canvas.toDataURL(图像/ PNG);
    尝试{
        BLOB = dataURItoBlob(为imageData);
    }
    赶上(E){
        的console.log(E);
    }
    变种FD =新FORMDATA();
    fd.append(的access_token的authToken);
    fd.append(来源,BLOB);
    fd.append(信息,图片文字);
    尝试{
        $阿贾克斯({
            网址:https://graph.facebook.com/me/photos?access_token=+的authToken,
            键入:POST,
            数据:FD,
            过程数据:假的,
            的contentType:假的,
            缓存:假的,
            成功:功能(数据){
                的console.log(成功+数据);
            },
            错误:功能(SHR,状态,数据){
                的console.log(错误+数据+状态+ shr.status);
            },
            完成:功能(){
                的console.log(发布到Facebook);
            }
        });
    }
    赶上(E){
        的console.log(E);
    }
}功能dataURItoBlob(dataURI){
    变种字节串= ATOB(dataURI.split(,)[1]);
    VAR AB =新ArrayBuffer(byteString.length);
    VAR IA =新Uint8Array(AB);
    对于(VAR I = 0; I< byteString.length;我++){
        IA [I] = byteString.char $ C $猫(I)
    }
    返回新的Blob([AB] {类型:图像/ PNG'});
}

下面是在GitHub上code
https://github.com/DanBrown180/html5-canvas-post-to -facebook-的base64

I'm trying to upload a base64 image to a FaceBook page using Node.js. I have managed to get the upload working with all the multipart data etc should I read the file from the filesystem (ie. using fs.readFileSync('c:\a.jpg')

However, should I use the base64 encoded image and try upload it, it give me the following error : {"error":{"message":"(#1) An unknown error occurred","type":"OAuthException","code":1}}

I have tried converting it to binary by new Buffer(b64string, 'base64'); and uploading that, but no luck.

I have been struggling with this for 3 days now, so anyhelp would be greatly appreciated.

Edit : If anyone also knows how I could convert the base64 to binary and successfully upload it, that would also work for me.

Edit : Code Snippet

var postDetails = separator + newlineConstant + 'Content-Disposition: form-data;name="access_token"' + newlineConstant + newlineConstant + accessToken + newlineConstant + separator;

postDetails = postDetails + newlineConstant + 'Content-Disposition: form-data; name="message"' + newlineConstant + newlineConstant + message + newlineConstant;

//Add the Image information
var fileDetailsString = '';
var index = 0;
var multipartBody = new Buffer(0);
images.forEach(function (currentImage) {
    fileDetailsString = fileDetailsString + separator + newlineConstant + 'Content-Disposition: file; name="source"; filename="Image' + index + '"' + newlineConstant + 'Content-Type: image/jpeg' + newlineConstant + newlineConstant;
    index++;

    multipartBody = Buffer.concat([multipartBody, new Buffer(fileDetailsString), currentImage]); //This is what I would use if Bianry data was passed in 

    currentImage = new Buffer (currentImage.toString('base64'), 'base64'); // The following lines are what I would use for base64 image being passed in (The appropriate lines would be enabled/disabled if I was using Binary/base64)
    multipartBody = Buffer.concat([multipartBody, new Buffer(fileDetailsString), currentImage]);
});

multipartBody = Buffer.concat([new Buffer(postDetails), multipartBody, new Buffer(footer)]);

解决方案

The code above didn't quite work for me (Missing comma after type:"POST", and data URI to blob function reported errors. I got the following code to work in Firefox and Chrome:

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);
            },
            error:function(shr,status,data){
                console.log("error " + data + " Status " + shr.status);
            },
            complete:function(){
                console.log("Posted to facebook");
            }
        });
    }
    catch(e) {
        console.log(e);
    }
}

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' });
}

Here's the code at GitHub https://github.com/DanBrown180/html5-canvas-post-to-facebook-base64

这篇关于上传图片的Base64 Facebook的图形API的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆