html2canvas截图图片另存并解决图片模糊问题

最新推荐文章于 2024-07-31 11:17:59 发布

cjjiang1536

最新推荐文章于 2024-07-31 11:17:59 发布

阅读量4.9k

点赞数 1

分类专栏： JavaScript 文章标签： html2canvas

本文链接：https://blog.csdn.net/jiang1536/article/details/102629079

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近由于公司业务要求，需要完成一个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>元素
    } 
}）;

html2canvas(document.getElementById('view')).then(function(canvas) {
                                                    var myImage4 = canvas.toDataURL("image/jpeg",1.0);
                                                    //并将图片上传到服务器用作图片分享
                                                    var fileName4 = "ws_" + $("#period").val()+'_shouji';
                                                    $.ajax({
                                                        type : "POST",
                                                        url : ctx+'/portal/upload',
                                                        data : {data:myImage4,fileNAme:fileName4},
                                                        timeout : 60000,
                                                        success : function(data){
                                                            alert("静态资源文件生成完毕！");
                                                            mini.unmask(document.body);
                                                        }
                                                    });
                                                });

最原始效果图找不到了，放一张稍微有点对比性的吧，最原始截出来文字发虚，模糊度文字无法叙述：

html2canvas提供了scale属性可调整清晰度：

优化后效果图：

参数用法介绍：

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