第一次使用 html2canvas

html2canvas - Screenshots with JavaScripticon-default.png?t=L892http://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';
    }

 

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值