msSaveBlob 没有 return 完整图像

Question

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

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

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

我知道问题不是来自 dataURLtoBlob() 因为读取 blob 作为数据 Url returns 与原始数据完全相同。

谁能帮我理解这是怎么回事？非常感谢您的帮助。

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

Answer 1

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

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

总结一下：

QR 码 PNG -> Blob -> msSaveBlob = 一半图像
二维码 PNG -> Canvas -> Blob -> msSaveBlob = 全图

msSaveBlob 没有 return 完整图像

msSaveBlob does not return the full image

javascript

internet-explorer

blob