美文网首页
Chrome 和 IE 下导出下载图片

Chrome 和 IE 下导出下载图片

作者: 一沭丶 | 来源:发表于2019-11-13 15:07 被阅读0次

    基于 canvas 生成的图片,然后下载
    兼容性: IE11、IE10、chrome,其他未测

    function dataURLToBlob(dataurl) {
        var arr = dataurl.split(',');
        var mime = arr[0].match(/:(.*?);/)[1];
        var bstr = atob(arr[1]);
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
            type: mime
        });
    }
    
    
    var blob = dataURLToBlob(canvas.toDataURL('image/png', 1));
    
    var url = window.URL.createObjectURL(blob);
    var filename = that.canvasConfig.title + ".png";
    
    // IE 11
    if (window.navigator.msSaveBlob !== undefined) {
        window.navigator.msSaveBlob(blob, filename);
        return;
    }
    
    var a = document.createElement("a");
    a.style.display = "none";
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    
    requestAnimationFrame(function () {
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
    });
    

    相关文章

      网友评论

          本文标题:Chrome 和 IE 下导出下载图片

          本文链接:https://www.haomeiwen.com/subject/thnhictx.html