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"/> 

提供的谷歌例如查找该文件选择的变化，并得到文件数据如下：

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

，然后通过的FileReader对象如下：

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

我的问题是我怎么提供图像对象标记在requi 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} 
    ); 
}