图=> Base64 =>二进制

Question

我正在尝试将blob网址上传到imgur api：

https://apidocs.imgur.com/#c85c9dfc-7487-4de2-9ecd-66f727cf3139

它在文档中清楚地表明可以是：binary file或base64或url

我的网址（示例）：blob:http://localhost:8080/7e44709-093d-4a4-b167-a3fdfc63a8e

formData.append('image', 'blob:http://localhost:8080/7e44709-093d-4a4-b167-a3fdfc63a8e');
formData.append('type', 'URL');

但是我从imgur api中收到400错误，

{"data":{"error":
"Invalid URL (blob:http:\/\/localhost:8080\/7e44729-093d-4aa4-167-a3fdef3a8e)",
"request":"\/3\/image","method":"POST"},"success":false,"status":400}

期待获得帮助，为什么会失败以及如何正确上传。谢谢你

Answer 1

图像需要先转换为base64，然后再从base64转换为二进制。这是通过.toDataURL()和dataURItoBlob()

完成的

图=> Base64 =>二进制

function imgToURI() {
  // Convert image to Base64
  var img = snap.toDataURL();
  // Convert Base64 image to binary
  var file = dataURItoBlob(img);
}

function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(dataURI.split(',')[1]);
else
    byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
}

如果仅此而已，您可以在base64处停止，就我而言，我需要再次转换为二进制，以便无需使用db就可以将数据传递到twitter（使用OAuth）。事实证明，您可以鸣叫非常酷的二进制文件，twitter会将其转换回为图像。

I created a blog post about this a few years ago

Answer 2

由于API接受二进制，因此您可以发送用于生成此blobURI的Blob（您必须传递给URL.createObjectURL的Blob，因为它是唯一能够生成此类URI的方法）。

formData.append('image', the_original_blob);
formData.append('type', 'file');

如果您对确实产生此blobURI的代码不负责任，则~~您有问题。~~

您可以检查this answer，它为URL方法提供了一个猴子补丁，以便我们可以检索它们指向的Blob，
或者您可以再次获取该blobURI作为Blob（更多的内存使用量，但仍然比通过base64少一些）。

上载Blob URL到Imgur？

2 个答案:

图=> Base64 =>二进制