第一次使用 html2canvas

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';
    }

 

 虽然样式还有点问题，大致还是不错的。功能实现。