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更少一点

秒客网

html2canvas转图片不清晰的问题

相关文章