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}
    );
}