1.html2canvas.js简介
html2canvas.js具体来说是一个脚本或者js插件, 该脚本允许您直接在用户浏览器上截取网页或部分网页的“内容截图”。该脚本是基于DOM进行渲染的,所以只支持大部分的css特效,还有就是不支持跨域显示资源或者显示frame框架内容等。局限还是挺大的,但是用于普通的页面(dom)截图真的是太方便了。
2. 引入html2canvas.js
用插件,当然最便捷的就是使用CDN了。下面是各个版本html2canvas.js的CDN引入地址,点击进去即可获得,如果不会引入的请留言。
https://www.bootcdn.cn/html2canvas/
如果想要直接下载插件的,请访问如下链接。
http://html2canvas.hertzen.com/
鼠标选中插件右键另存为就好了。不会本地引入的就请勿留言了。
3. 使用html2canvas截图
最近有需要,做一个电子病历截图下载下来。
如下图,红色圈圈圈起来的部分是要下载的内容。
截图的内容如下。
最主要的DOM结构如下:
<body>
<div class='person-info'>
左边的用户信息栏
</div>
<div class='record-info' id='record'>
右边的病历栏
</div>
</body>
既然是基于DOM的,那么我们需要的就是需要截图部分最外层的DOM。
先引入插件
<script src="js/html2canvas.js"></script>
然后是截图
new html2canvas(document.getElementById('record'), {
backgroundColor: "transparent", //png图片透明
allowTaint: true, // 显示图片
useCORS: true //允许跨域
}).then(canvas => {
// canvas为转换后的Canvas对象
let oImg = new Image();
oImg.src = canvas.toDataURL(); // 导出图片
$("img").attr("src",oImg.src);
});
这里我将img标签地址执行了src属性赋值为截图地址,通过追踪发现,src是base64编码后的数据,
图片src指向了如图所示大的一大串字符。这一大串字符就是图片通过base64编码后的图片数据。这里使用截图就是用img标签将截图显示出来,由此可见,截图效果还可以,这也是以为我截图的内容基本都是纯dom结构渲染的。
4.下载截图
下载截图相对于来说就简单得多了
// canvas为转换后的Canvas对象
let oImg = new Image();
oImg.src = canvas.toDataURL(); // 导出图片
// document.body.appendChild(oImg); // 将生成的图片添加到body
$("img").attr("src",oImg.src);
var alink = document.createElement("a"); alink.setAttribute("download","下载.png");
alink.href = oImg.src;
alink.click();
就是创建一个a标签,其href指向图片地址,设置其download属性值为你想要保存的图片名字,这样就可以了。建议图片保存格式为png,至于为啥不是jpg,你自己去研究了。
如果这里无法下载的请留言。
5.局部打印
首先,如果是要打印html2canvas所截取下来的图片,方案是新打开一个窗口,将图片的src传递过去,并设置为body的背景图片。然后调用window自带的打印功能进行打印。但是,这里打印的是图片,所以如果是黑白印刷的话容易出现问题。
于是,采用第二种方案,将要打印部分dom提取出来,然后打开新的浏览器窗口,将提取出来的dom结构写入,然后再执行打印操作。
var newstr = document.getElementById("record").innerHTML;
printWindow = window.open();
printWindow.document.write(newstr);
printWindow.print();
执行结果如下图所示
这里之所以没有背景色,是因为我把背景色的css提取出来了。值得注意的是,使用这种方法时,得将css写在标签内部,独立出来的css是不能通过这种方法表现出来的。因为再获取dom时无法获取到其引用的css样式。
如果大家有更好的方法解决网页局部截图的问题,希望能分享出来,我想用更好的东西。