htmlCanvas2将html页面生成图片并下载

需求是需要将html页面保存图片，使用的技术是html2Canvas

主要思路就是我们先找到自己想要获取的是页面的div，然后获取这个dom，然后将获取dom的宽和高，并将其缩放为原来的2倍，这样是为了防止下载的图片模糊。获取到dom后，我们创建一个canvas的对象，然后设置canvas的宽和高。我们在设置html2canvas的时候，要设置 useCORS为true，这个就是设置跨域。

savePic = ()=>{
        var dom = document.getElementsByClassName("print_page_freezer")[0];
        var domWrap = document.getElementsByClassName("print_wrap")[0];

        var width = dom.offsetWidth; 
        var height = domWrap.offsetHeight;
        var scaleBy = 2;

        var canvas = document.createElement('canvas');

        canvas.width = width * scaleBy;

        canvas.height = height * scaleBy;

        canvas.style.width = width * scaleBy + 'px';

        canvas.style.height = height * scaleBy + 'px';

        var context = canvas.getContext('2d');

        context.scale(scaleBy, scaleBy);

        var filename = (new Date()).getTime() + '.' + "png";

        html2canvas(dom, {
            canvas: canvas,
            useCORS: true,
            scale: 2, 
            width: width, 
            height: height
        }).then(function(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);
            };

            saveFile(imgData,filename);
        })
    }

这个方法就是可以触发的时候可以下载并保存的功能

使用html2canvas截图，遇到两个问题，一个是图片显示不出来，是因为没有设置跨域问题，第二个问题是字体特别小，需要进行font-variant: normal;设置，设置完即可

htmlCanvas2将html页面生成图片并下载

猜你喜欢