时间戳

首页 > 解决方案 > msSaveBlob 不返回完整图像

javascript - msSaveBlob 不返回完整图像

问题描述

我正在尝试为 Internet Explorer 用户实现一个下载按钮，让他们下载页面上显示的 png 文件。

图像作为数据 URL 提供并正常显示在页面上。

但是，当使用以下代码在 Internet Explorer 上下载图像时，只会下载图像的上半部分。

我知道问题不是来自于dataURLtoBlob()将 blob 作为 Data Url 读取会返回完全相同的原始数据。

谁能帮我理解这里发生了什么？非常感谢您的帮助。

downloadButton.onclick = function () {

    if (window.navigator.msSaveOrOpenBlob) {

        var filename = "image.png";
        var data = $('#qrCode').attr("href");
        var blob = dataURLtoBlob(data);

        console.log(data);

        let reader = new FileReader();
        reader.readAsDataURL(blob); 

        reader.onload = function() {
            console.log(reader.result); 
        };

        window.navigator.msSaveBlob(blob, filename);
    }
}

function dataURLtoBlob(dataUrl) {

    var arr = dataUrl.split(',');
    var mime = arr[0].match(/:(.*?);/)[1];
    var byteString = atob(arr[1]);
    var arrayBuffer = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(arrayBuffer);

    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], { type: mime });
}

标签： javascriptinternet-explorerblob

解决方案

我设法通过使用中间画布找到了解决此问题的方法。

        var ieCanvas = document.getElementById("ieCanvas");
        var ctx = ieCanvas.getContext("2d");
        var img = document.getElementById("qrCodeImg");
        ctx.drawImage(img, 0, 0);

        var filename = "download.png";
        window.navigator.msSaveBlob(ieCanvas.msToBlob(), filename);

总结一下：

  • 二维码 PNG -> Blob -> msSaveBlob =图像的一半
  • 二维码 PNG -> 画布 -> Blob -> msSaveBlob =完整图像

推荐阅读