详解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 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 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读取csv文件内容的详解
2013/06/18 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
laravel自定义分页效果
2017/07/23 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
python控制台中实现进度条功能
2015/11/10 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
大学生涯自我鉴定
2014/01/16 职场文书
秸秆管理实施方案
2014/03/15 职场文书
售后服务承诺书范文
2014/03/26 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
三方股东合作协议书
2014/10/28 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
Redis Cluster 集群搭建你会吗
2021/08/04 Redis