msSaveBlob не возвращает полное изображение - PullRequest
Новая
       12

msSaveBlob не возвращает полное изображение

0 голосов
/ 28 февраля 2020

Я пытаюсь реализовать кнопку загрузки для пользователей Inte rnet Explorer, которая позволит им загружать png-файл, отображаемый на странице.

Изображение предоставляется в виде URL-адреса данных и обычно отображается на странице.

Однако, когда изображение загружается в Inte rnet Explorer с использованием следующего кода, загружается только верхняя половина изображения .

Я знаю проблему не приходит от dataURLtoBlob(), потому что чтение большого двоичного объекта как 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 });
}

1 Ответ

0 голосов
/ 02 марта 2020

Мне удалось найти обходной путь для этой проблемы с помощью промежуточного холста. 

        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 = Половина изображения
  • QR-код PNG -> Холст -> Blob -> msSaveBlob = Полное изображение
...