Question

我目前正在关注this tutorial，以便通过javascript将图片上传到Google云端硬盘。示例代码完美地运行，您可以选择要从硬盘驱动器上载的文件。我现在正在尝试为我的目的修改它，以便它以标准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}
    );
}

Javascript：为FileReader readAsBinaryString准备图像对象

1 个答案: