html2canvas - Screenshots with JavaScripthttp://html2canvas.hertzen.com/
客户来电话,说系统上要调整几个东西,最郁闷的是要把系统使用界面生成一张图,还要加水印,一想到都觉得好蛋疼。
开始想到就是去看js有没有这方面的东西,结果没有专门生成图的,只有canvas来绘制,我当场都想放弃了。突然看到一篇文章canvas和html2canvas栋对比,写得html2canvas感觉很NB,就去查了下,果然很NB。
<script src="~/js/html2canvas/html2canvas.min.js"></script>
下载好html2canvas.min.js,丢进系统文件里,找了几个教程大致看了下,真心很简单,代码量很少,简直太爽了。然后突然发现加水印又是个蛋疼的事,网上看了会,就放弃了,后来想着这不是截图么,那么我给他来一个div显示出来,不就行了么。
于是做了一张透明PNG,加了一个绝对位置的div,隐藏起来,然后调用方法的时候让他显示出来,完毕之后再隐藏,一试就成功了,再加上创建链接点击下载,爽,于是有了下面的代码:
function watermark() {
document.getElementById('watermark').style.display = 'block';
html2canvas(document.body, { useCORS: true }).then(function (canvas) {
//document.body.appendChild(canvas);
let url = canvas.toDataURL();//生成的base64的图片
let a = document.createElement("a");
let clickEvent = document.createEvent("MouseEvents");
a.setAttribute("href", url);
a.setAttribute("download", "codeImg");
a.setAttribute("target", "_blank");
clickEvent.initEvent("click", true, true);
a.dispatchEvent(clickEvent);
});
document.getElementById('watermark').style.display = 'none';
}
虽然样式还有点问题,大致还是不错的。功能实现。