详解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 选择器 属性选择器介绍
Jan 21 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 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
谈一谈收音机的高放电路
2021/03/02 无线电
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
django从后台返回html代码的实例
2020/03/11 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
退伍老兵事迹材料
2014/01/31 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
教师党员公开承诺书
2014/03/25 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL