这次给大家带来html+canvas实现屏幕截取，html+canvas实现屏幕截取的注意事项有哪些，下面就是实战案例，一起来看一下。
Test *{ margin:0 auto; padding:0; } .btn{ width:100px; height:30px; line-height:30px; background:green; color:#fff; border-radius:10px; -webkit-border-radius:10px; text-align:center; display:block; text-decoration:none; } .container{ background:#e5e5e5; } $(function(){ $("#btn").click(function(){ html2canvas($("#container"), { onrendered: function(canvas) { //把截取到的图片替换到a标签的路径下载 $("#download").attr('href',canvas.toDataURL()); //下载下来的图片名字 $("#download").attr('download','share.png') ; document.body.appendChild(canvas); } //可以带上宽高截取你所需要的部分内容 // , // width: 300, // height: 300 }); }); });
截取屏幕
先点击截取屏幕后再点击截图下载
以下是测试内容
登录后复制
由于使用最新版本的html2canvas截取屏幕有问题，所以上面使用的是v0.4.1版本进行测试。
注意事项：
1.页面加载完之后再调用html2canvas。
2.截取背景图片没有效果（就算把背景图片转为base64也没有效果）。
3.标签的图片需要转为base64，不然截取没有效果（网上搜索了一下，好像都说是跨域问题）。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
jQuery自定义框并获取框内数据
vuex+Actions使用详解
hammer.js实现移动端的图片手势放大功能
立即学习“前端免费学习笔记（深入）”；
以上就是html+canvas实现屏幕截取的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2770810.html
