详解html2canvas截图不能截取圆角图片的解决方案


Posted in HTML / CSS onJanuary 30, 2018

以前我们只能通过其他的截图工具来截取图像。现代浏览器的功能已经越来越强,随着H5的逐渐普及,浏览器本身就可以截图啦。html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来。虽然很方便,但有以下限制:

  • 不支持iframe
  • 不支持跨域图片
  • 不能在浏览器插件中使用
  • 部分浏览器上不支持SVG图片
  • 不支持Flash
  • 不支持古代浏览器和IE,如果你想确认是否支持某个浏览器,可以用它访问 http://deerface.sinaapp.com/ 试试 :)

由于我的使用场景很简单,记录一下异常信息,并且异常页面也是由自己定义的,那么html2canvas 就足够使用了。

第一次用html2canvas,目的就是想把整个页面截图下来生成一张图片给用户保存

下面我们先来看看HTML渲染出来的是啥样子的

详解html2canvas截图不能截取圆角图片的解决方案

HTML渲染出来的图片可以看到上面的图片是有圆角效果的,但是当我用html2canvas来进行转换图片操作的时候,发现图片圆角效果没失效了。

详解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>

复制代码
代码如下:

<a href="<a href="http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg"><img">http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg"><img</a> src="<a href="http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg">http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg</a>" alt="" width="169" height="300" srcset="<a href="http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg">http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg</a> 169w, <a href="http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg">http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg</a> 377w" sizes="(max-width: 169px) 100vw, 169px" /></a>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
详解CSS3浏览器兼容
Dec 24 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 #HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 #HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 #HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 #HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 #HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 #HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 #HTML / CSS
You might like
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
javascript测试题练习代码
2012/10/10 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python 连连看连接算法
2008/11/22 Python
Python中类的继承代码实例
2014/10/28 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
庆元旦文艺演出主持词
2014/03/27 职场文书
毕业生就业意向书
2014/04/01 职场文书
出纳担保书范文
2014/04/02 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
小学班主任评语大全
2014/04/23 职场文书
运动会标语
2014/06/21 职场文书
合理化建议书
2015/02/04 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python