以前我们只能通过其他的截图工具来截取图像。现代浏览器的功能已经越来越强,随着H5的逐渐普及,浏览器本身就可以截图啦。html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来。虽然很方便,但有以下限制:
由于我的使用场景很简单,记录一下异常信息,并且异常页面也是由自己定义的,那么html2canvas 就足够使用了。
第一次用html2canvas,目的就是想把整个页面截图下来生成一张图片给用户保存
下面我们先来看看HTML渲染出来的是啥样子的
HTML渲染出来的图片可以看到上面的图片是有圆角效果的,但是当我用html2canvas来进行转换图片操作的时候,发现图片圆角效果没失效了。
变成了上面这个样子。想了很多解决方案,后来决定把后面的圆角做成一张背景图片,中间圆的部分背景透明,然后通过绝对定位覆盖到原来的图片上面,相当于是一个遮罩这种效果。
当然,遮罩图片的DOM节点必须在需要圆角图片的下面,类似于
<div class="avatar_img fl"><div class="avatar_img fl"> <img src="" id="you" class="avatar_pp fl" /><!--需要圆角的原始图片--> <img src="/template/images/avatar.png" class="img-responsive" style="position: absolute;"><!--遮罩图片--> </div>
生成出来就是正常的样子了
<div class="avatar_img fl"><div class="avatar_img fl"> <img src="" id="you" class="avatar_pp fl" /><!--需要圆角的原始图片--> <img src="/template/images/avatar.png" class="img-responsive" style="position: absolute;"><!--遮罩图片--> </div>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
大话搜索 搜索一般指在有限的状态空间中进行枚举,通过穷尽所有的可能来找到符合...
最近看过我文章的都知道:我最近在负责一个微信小程序的项目,在其中遇到了很多...
1. dhtmlxTree dHTMLxTree是一个功能丰富的Tree Menu控件。提供丰富的操作API, ...
问题背景 假设有这样的一个需求:判断某一朵花是不是鸢尾花。我们知道不同品种的...
面试血泪史 不要问我面的是不是架构师。我只是面的低级前端。总结不易点个赞吧。...
不小心误删或者弄丢了重要文件数据怎么办?不要慌不要乱,这里告诉你还有得救!不...
说明,在网页开发中,在表单中加入autocomplete=off后,IE和FF不会提示保存密码...
一、网络优化 YSlow 有23条规则。这几十条规则最主要是在做消除或减少不必要的网...
复制代码 代码如下: .sugLayerDiv{ position:relative; overflow:hidden; /*DIV ...
也因此造成了上传不了png文件的原因(后来看了资料才知道我找错了注册表的位置)。...