详解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中Color的一些特性介绍
May 27 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 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
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
PHP Cookie学习笔记
2016/08/23 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
非常好的js代码
2006/06/27 Javascript
修改发贴的编辑功能
2007/03/07 Javascript
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
javascript 解析url的search方法
2010/02/09 Javascript
js 编写规范
2010/03/03 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
详解小白之KMP算法及python实现
2019/04/04 Python
python实现抖音点赞功能
2019/04/07 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
mysql有关权限的表都有哪几个
2015/04/22 面试题
项目副经理岗位职责
2013/12/30 职场文书
马云的职业生涯规划之路
2014/01/01 职场文书
爱国演讲稿500字
2014/05/04 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫