html2canvas转图片不清晰的问题

 需要做一个生成海报的功能，然后发现生成的图片会特别模糊；现在来记录一下解决方案：

这里使用的是背景图，然后生成图片，生成以后的图片：效果非常模糊 图片大小226kb

 依据：

名称	默认值
dpi	96	将分辨率提高到特定的DPI（每英寸点数）
scale	1	按比例增加分辨率 (2=双倍)

 

所以只要增大dpi或者scale肯定能使同样宽高的图像变得清晰。

方法1：利用增大dpi

dpi:DPI是指某些设备分辨率的度量单位。DPI越低，扫描的清晰度越低，DPI越高，清晰度越高。
由于受网络传输速度的影响，web上使用的图片都是72dpi，照片使用300dpi或者更高350dpi，会很清晰。

 html2canvas(template, {
                dpi: 300,//加了一个这个设置 
                onrendered: function (canvas) {
                    var imgURL = canvas.toDataURL('image/png');
                    $('#downloadImg').attr('src',imgURL);
                    $('.poster-module').addClass('on');
                },

                useCORS: true, //（图片跨域相关）
                allowTaint: false, //允许跨域（图片跨域相关）
                x: 0,//页面在横向方向上的滚动距离  横向上没有超过 所以设置为0
                y: window.pageYOffset,//页面在垂直方向上的滚动距离 设置了以后 超过一屏幕的内容也可以截取
                windowWidth: document.body.scrollWidth,//获取在x轴上滚动条中内容
                windowHeight: document.body.scrollHeight,//获取在y轴上滚动条中内容
            });

　　

 清晰很多，效果：

 

 

方法2：增大scale

//获取设备比
    function getDPR(){
        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
            return window.devicePixelRatio;
        }
        return 1;
    }
    var template = document.getElementById('module');
    // 放大canvas
    function scaleCanvas(){
        // 要转换的模板dom
        var dom = template;
        // window.getComputedStyle 获取元素的样式
        const box = window.getComputedStyle(dom); //这个方法 介绍 https://www.runoob.com/w3cnote/window-getcomputedstyle-method.html
        // 获取DOM 节点计算后宽高  取到的内容是385.993px
        const width = box.width.replace('px','')
        const height = box.height.replace('px','')
        // 获取像素比
        const scaleBy = getDPR();
        // 创建自定义 canvas 元素
        const canvas = document.createElement('canvas');
        // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
        canvas.width = width * scaleBy;
        canvas.height = height * scaleBy;
        // 设定 canvas css宽高为 DOM 节点宽高
        canvas.style.width = `${width}px`;
        canvas.style.height = `${height}px`;
        // 获取画笔
        const context = canvas.getContext('2d');
        // 将所有绘制内容放大像素比倍
        context.scale(scaleBy, scaleBy);
        var rect = template.getBoundingClientRect(); //获取元素相对于视察的偏移量
        context.translate(-rect.left, -rect.top); //设置context位置，值为相对于视窗的偏移量负值，让图片复位
        html2canvas(template, {
            canvas,//将放大的cnavas作为参数传进去
            // dpi: 300,
            onrendered: function (imgCanvas) {
                var imgURL = imgCanvas.toDataURL('image/png');
                $('#downloadImg').attr('src',imgURL);
                $('.poster-module').addClass('on');
            },
            useCORS: true, //（图片跨域相关）
            allowTaint: false, //允许跨域（图片跨域相关）
        });
    }

　　这里有一个注意点，就是放大以后，绘制，会有一个偏移，所以要调整这个偏移量

效果：清晰了，图片大小 336kb

 

 

 

 

 

 

方法3

 将背景图用img引入，通过定位，设置z-index来，css代码就不附上了

效果：比之前直接背景图，清晰了一些，但是还是有点模糊 ,图片大小 256kb

 

 

 方法4

之前使用的版本是

0.5.0-beta3

现在 换了一个版本 

1.0.0-rc.5

 使用图片不用背景图，生成得海报

html2canvas(template,{
                allowTaint: false,
                useCORS: true,
                height: template.offsetHeight,
                width: template.offsetWidth,
                windowWidth: document.body.scrollWidth,
                windowHeight: document.body.scrollHeight,
            }).then(function (imgCanvas) {
                var imgURL = imgCanvas.toDataURL('image/png');
                $('#downloadImg').attr('src',imgURL);
                $('.poster-module').addClass('on');
            });

  效果 变清晰了 ，看来还是使用最新版本得 bug更少一点