通过Google Drive API下载得到PNG Chunks，如何用JavaScript转为PNG图片

问题根本原因 #

你当前获取到的PNG Chunks文本是因为XHR默认以UTF-8文本格式解析PNG的二进制流，导致原始字节被错误编码损坏，无法直接生成可用的PNG文件。

修复代码 #

修改原有XHR配置，指定响应类型为二进制格式，拿到响应后直接转为Blob对象即可生成可用PNG，完整代码如下：

// 谷歌Drive下载文件函数
function downloadFile(Url, callback) {
    if (Url) {
        var accessToken = gapi.auth.getToken().access_token;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', Url);
        xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
        // 关键修改：指定响应类型为blob，直接接收二进制数据
        xhr.responseType = 'blob';
        xhr.onload = function() {
            // 不要用responseText，直接拿response的blob对象
            callback(xhr.response);
        };
        xhr.onerror = function() {
            callback(null);
        };
        xhr.send();
    } else {
        callback(null);
    }
}

// 调用示例，拿到blob后可直接生成下载链接或者插入页面
downloadFile("https://www.googleapis.com/drive/v2/files/id?alt=media&source=downloadUrl", 
function(blobResp){
    if(!blobResp) return;
    // 场景1：生成下载链接让用户保存PNG
    const downloadUrl = URL.createObjectURL(blobResp);
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = 'target.png';
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(downloadUrl);

    // 场景2：直接插入页面img标签显示
    // const img = document.createElement('img');
    // img.src = URL.createObjectURL(blobResp);
    // document.body.appendChild(img);
})

额外说明 #

• 如果需要后续对PNG二进制做进一步处理，也可以把responseType设置为arraybuffer，拿到原始字节流后再做自定义操作
• 不要手动把二进制流转为字符串再转回来，会因为编码问题丢失部分字节，直接用blob/arraybuffer接收是最稳妥的方案

内容的提问来源于stack exchange，提问作者Rokonuzzaman Robin