使用html2canvas保存html或者div内容为图片及自定义名称

最新推荐文章于 2024-08-20 11:35:04 发布

醉酒的诗意

最新推荐文章于 2024-08-20 11:35:04 发布

阅读量1.5k

点赞数 1

文章标签： html或者div保存图片

本文链接：https://blog.csdn.net/a1213353721/article/details/82748128

版权

使用html2canvas保存html或者div内容为图片及自定义名称，测试可用

<div id="first" style="width: 90%;height: 100%">
$(function(){

$('#btnSave').click(function() {
        html2canvas(document.querySelector("#first")).then(function(canvas) {
            document.body.appendChild(canvas);
            var type = 'png';
            var imgData = canvas.toDataURL(type);
            var _fixType = function(type) {
                type = type.toLowerCase().replace(/jpg/i, 'jpeg');
                var r = type.match(/png|jpeg|bmp|gif/)[0];
                return 'image/' + r;
            };
            imgData = imgData.replace(_fixType(type),'image/octet-stream');
            var saveFile = function(data, filename){
                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href = data;
                save_link.download = filename;
                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                save_link.dispatchEvent(event);
            };
            var filename = '123456' + '.' + type;
            if (canvas.msToBlob) {//IE9+浏览器
                     var blob = canvas.msToBlob();
                      window.navigator.msSaveBlob(blob, filename);
            } else {//firefox,chrome
                    saveFile(imgData, filename);
            }
        });
    });
    
});