Javascript:为 FileReader readAsBinaryString 准备图像对象

Question

我目前正在关注this tutorial用于从 javascript 将图像上传到 Google Drive。该示例代码运行良好，您可以选择要从硬盘上传的文件。我现在尝试根据我的目的修改它，以便它以标准 HTML 形式上传已在页面上显示的图像:

<img class="image" id="result-image" src="imgres?img_id={{result_id}}" alt="No Image"/>

提供的 Google 示例查找文件选择器上的更改并获取文件数据，如下所示:

var fileData = evt.target.files[0];

然后由 FileReader 对象读取，如下所示:

    var reader = new FileReader();
    reader.readAsBinaryString(fileData);
    reader.onload = function(e) {
    ...

我的问题是如何为 FileReader readAsBinaryString 方法提供所需类型的图像对象标记，以便 Drive API 调用能够成功？提前致谢!

Answer 1

使用 Joe Coder's solution 修复如下:

    var img = document.getElementById('result-image');
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    var dataUrl = canvas.toDataURL('image/png');
    var blob = dataUriToBlob(dataUrl);
    var reader = new FileReader();
    reader.readAsBinaryString(blob);
    reader.onload = function(e) {
    ...

使用 dataUriToBlob 方法:

function dataUriToBlob(dataURI) {
    // serialize the base64/URLEncoded data
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0) {
        byteString = atob(dataURI.split(',')[1]);
    }
    else {
        byteString = unescape(dataURI.split(',')[1]);
    }

    // parse the mime type
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    // construct a Blob of the image data
    var array = [];
    for(var i = 0; i < byteString.length; i++) {
        array.push(byteString.charCodeAt(i));
    }
    return new Blob(
        [new Uint8Array(array)],
        {type: mimeString}
    );
}