解决html2canvas截图模糊的问题

2018/1/6 12:55:03 人评论 次浏览 分类:HTML

最近由于公司业务要求,需要完成一个一键生成照片海报的功能,功能的核心是把HTML代码展现的内容转化为png或者jpg图片。接到这个任务的时候,我心里是一脸懵逼的,于是就上谷歌搜索插件,还真有一款名叫html2canvas的插件,我心想看来这任务还是挺简单的,那开始吧!

html2canvas

运行脚本,可以直接在用户浏览器上拍摄网页或其部分的“截图”。截图是基于DOM,因此并不是100%准确的真实表示,因为它是实际的截图,而是根据页面上可用的信息构建截图。(引用自html2canvas官网)

入门

html2canvas的简单调用:

// element是需要截图的元素
html2canvas(element,options);

可用选项(options)

参数名称 类型 默认值 描述
allowTaint boolean false 允许跨域
useCORS boolean false 貌似与跨域有关,但和allowTaint不能共存
proxy string undefined 代理地址
taintTest boolean true 是否在渲染前测试图片
timeout number 0 图片加载延迟,默认延迟为0,单位毫秒
logging boolean false 在Console中输出信息
width number null canvas的宽度设定
height number null canvas的高度设定
background string #fff canvas的背景颜色(未指定则为透明)
letterRendering boolean false 在设置了字间距的时候有用

特别的是,html2canvas提供了回调事件--onrendered来渲染canvas:

html2canvas(element,{ 
    onrendered:function(canvas){ 
        // canvas是最终渲染的<canvas>元素
    } 
});

我想有这些已经足够了吧,于是写下了这样的代码

// vue.js
// html
<div class="box">
    ![](../images/test.jpg)
</div>
<button @cllick="doShot">截图</button>

// js
doShot () {
    const w = $('.box').outerWidth(),
          h = $('.box').outerHeight();
    html2canvas($(".box"), {
        allowTaint: true,
        taintTest: false,
        width: w,
        height: h,
        onrendered: function(canvas) {
            var dataUrl = canvas.toDataURL("image/png", 1.0),
                newImg = document.createElement("img");
            newImg.src = dataUrl;
            $('.box').empty().append(newImg);
            newImg.style.width = '100%';
        }
    });
}

在chrome开发者工具中截图效果还不错,孰知在移动设备--iphone6中测试的时候竟然是这般模样:

截图效果

从图中的英文字母可以看出,图中的像素发生了偏移,给人的视觉感受是图片变模糊了,这可咋办呀!于是我又一次借助万能的google去寻求答案,但是答案大同小异,如下图:

网上的解决办法

但是,并没有什么作用,就在我万念俱灰的时候,在原作者的git上看到了#1087 自定义分辨率的解决方法,作者在html2canvas的源码中添加了两个参数,分别为scale和dpi,scale是比例,辣么dpi是个什么玩意儿,以下是百度百科对dpi的定义:

DPI是指每英寸的像素,也就是扫描精度。DPI越低,扫描的清晰度越低,由于受网络传输速度的影响,web上使用的图片都是72dpi,但是冲洗照片不能使用这个参数,必须是300dpi或者更高350dpi。例如要冲洗46英寸的照片,扫描精度必须是300dpi,那么文件尺寸应该是(4300)(6300)=1200像素*1800像素。

好啦,到这里我们应该知道,只要增大dpi或者scale肯定能使同样宽高的图像变得清晰,那么模糊的问题也就不存在了。

参数用法介绍

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

以下是增加了dpi和scale两个选项之后的html2canvas源码(拿走不谢)
https://github.com/eKoopmans/html2canvas/tree/develop/dist

最后将上面的html2canvas.js下载到本地,并引入到项目中:

// vue.js
// html
<div class="box">
    ![](../images/test.jpg)
</div>
<button @cllick="doShot">截图</button>

// js
doShot () {
    const w = $('.box').outerWidth(),
          h = $('.box').outerHeight();
    html2canvas($(".box"), {
        allowTaint: true,
        taintTest: false,
        width: w,
        height: h,
        // window.devicePixelRatio是设备像素比
        dpi: window.devicePixelRatio,
        onrendered: function(canvas) {
            const dataUrl = canvas.toDataURL("image/png", 1.0),
                  newImg = document.createElement("img");
            newImg.src = dataUrl;
            $('.box').empty().append(newImg);
            newImg.style.width = '100%';
        }
    });
}

最终的截图效果如下:

最终截图效果

如果大家还有什么更好的解决办法,请分享一下!

分享到: 腾讯 新浪 人人网 邮件 收藏夹 复制网址 更多

上一篇:你所不知道的伪元素用法——::before和::after

下一篇:浅析Vue项目打包——体积优化

相关知识


共有访客发表了评论 网友评论

验证码: 看不清楚?