javascript - 将 blob URL 上传到 Imgur？

Question

我正在尝试将 blob url 上传到 imgur api:

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

它在文档中明确表示它可以是:二进制文件或base64或url

我的 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()

完成的

Img => 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 停止，在我的情况下，我需要再次转换为二进制文件，以便我可以将数据传递到 Twitter(使用 OAuth)而不使用数据库。事实证明，您可以发布非常酷的二进制推文，推特会将其转换回图像。

I created a blog post about this a few years ago