Question

我有一个PNG图像的Javascript Blob，我是通过将我的图像写入画布而创建的。

我知道我可以使用window.saveAs(blob, name);下载图片，但我想将图片发送到服务器，特别是Google云端硬盘（但答案可能很普遍）。

我试过了

var reader = new FileReader();
reader.addEventListener("loadend", function() {
  var string = reader.result;
  // save string as a file to Google Drive with a .png filename 
  // and mimetype image/png
});
reader.readAsBinaryString(pngObject);

我对Google云端硬盘的请求负载看起来像

Request URL:https://content.googleapis.com/upload/drive/v2/files?uploadType=multipart
Request Method:POST
Request Payload:

---------314159265358979323846
Content-Type: application/json

{"title":"my-file.png","mimeType":"image/png","parents":[{"id":"root"}]}
---------314159265358979323846
Content-Type: image/png

PNG

IHDR,Q; IDATx^íçsT×Å·rÎ#rÎDÎc 6öxjjÞ§ùWæÃTM½1lá1 @, [...etc]

但是，该文件在Google云端硬盘中不会显示为图像，也不会在我下载后显示在我的计算机上。

当我从云端硬盘下载并打开＆＃34;图像＆＃34;在vim中，结果看起来与我所拥有的其他工作png类似：

<89>PNG^M
^Z
^@^@^@^MIHDR^@^@^A,^@^@^A^S^H^F^@^@^@<8c>Q;^M^@^@ ^@IDATx^í<9d>

[....]

^BÞ^Pø?gc<95>ô~2ÖÊ^@^@^@^@IEND®B`<82>
~                                                                               
~

但显然有一些东西阻止它被理解为png。

关于如何正确写出我的图像文件的想法？

Answer 1

我的解决方案最终是发送编码为base64的图像，并向有效负载添加Content-Transfer-Encoding: base64。

var reader = new FileReader();
reader.addEventListener("loadend", function() {
  var data = reader.result.split(",").pop();  // get rid of base64 header
  // save data to Google Drive
});
reader.readAsDataURL(pngObject);

Google云端硬盘的有效负载如下所示：

---------314159265358979323846
Content-Type: application/json

{"title":"my-file.png","mimeType":"image/png","parents":[{"id":"root"}]}
---------314159265358979323846
Content-Type: image/png
Content-Transfer-Encoding: base64

iVBORw0KGgoAAAANSUhEUgAAASwAAAETCAYAAACMUTsNAAAgAElEQVR4Xu2dh3dU
[...etc]
---------314159265358979323846

给定PNG Blob对象，如何将图像发送到Google云端硬盘等外部服务？

1 个答案: