Próbuję użyć facebook API do przesyłania obrazu z płótna zapisać na stronie:Przesyłanie obrazu canvas do facebook jak Blob typu multipart/form-data
var file = dataURItoBlob(canvas.toDataURL('image/jpeg', 1.0))
FB.api('/me/photos', 'POST', {
source: file,
message: 'photo description'
}, function (response) {
console.log(response)
}
)
To blob Przelicznik:
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/jpeg' });
}
i otrzymuję błąd: message: "(#324) Requires upload file"
więc wydaje przesyłający nie rozpoznaje blob jako ważnego pliku.
Aktualizacja 1:
I Fount ten post: Convert Data URI to File then append to FormData o konwersji blob do formData, próbował go tak:
var dataURL = canvas.toDataURL('image/jpeg', 1.0)
var blob = dataURItoBlob(dataURL)
var fd = new FormData(document.forms[0])
fd.append("canvasImage", blob)
FB.api('/me/photos', 'POST', {
source: fd .....
ale nadal ten sam błąd.
UPDATE 2:
nawet próbował to rozwiązanie XHR poczta, Using Facebooks javascript api to post multipart/form-data encoded image i wciąż otrzymuję pliku problem "Your photos couldn't be uploaded. Photos should be less than 4 MB and saved as JPG, PNG, GIF or TIFF files."
function postImageToFacebook(access_token) {
var filename = "samplepic.png",
mimeType = "image/png",
message = "test comment",
data = canvas.toDataURL("image/png"),
encodedPng = data.substring(data.indexOf(',') + 1, data.length),
imageData = atob(encodedPng);
// build the multipart/form-data
var boundary = '----ThisIsTheBoundary1234567890';
var formData = '--' + boundary + '\r\n'
formData += 'Content-Disposition: form-data; name="source"; filename="' + filename + '"\r\n';
formData += 'Content-Type: ' + mimeType + '\r\n\r\n';
for (var i = 0; i < imageData.length; ++i) {
formData += String.fromCharCode(imageData[i] & 0xff);
}
formData += '\r\n';
formData += '--' + boundary + '\r\n';
formData += 'Content-Disposition: form-data; name="message"\r\n\r\n';
formData += message + '\r\n'
formData += '--' + boundary + '--\r\n';
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://graph.facebook.com/v2.5/me/photos?access_token=' + access_token, true);
xhr.onload = xhr.onerror = function() {
console.log(xhr.responseText);
};
xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
xhr.send(formData);
}
API robi nie składać samodzielnie wniosku w wymaganym formacie ("multipart/form-data"). Sprawdź, jak emulować prawidłowe przesyłanie plików w JavaScript. – CBroe
Zaktualizowano. Nadal nie działa – ilyo
Nie możesz użyć do tego 'FB.api' - nigdy nie sprawi, że żądanie będzie we właściwym formacie. Musisz utworzyć własne żądanie HTTP POST i samodzielnie dostarczyć wszystkie niezbędne parametry, takie jak token dostępu. – CBroe