html2canvas加上canvas2image保存网页为图片
html2canvas可以通过纯JS对浏览器端进行截屏,但截图的精确度还有待提高,部分css不可识别,所以在canvas中不能完美呈现原画面样式
插件地址
- 官方网站:html2canvas
Github:html2canvas
这里有个坑,不要下载最高版本的js,有很多坑。我从1.0降下来了。我用的是0.5版本的
这个是我在用的0.5版本: html2canvas.min.js
- 这个是我已经做好了,下载过去参考参考html2canvas加上canvas2image保存网页为图片
版本号
在介绍这个插件前先科普一下软件的版本号.
- Alpha:是内部测试版,一般不向外部发布,会有很多Bug.一般只有测试人员使用。
- Beta:也是测试版,这个阶段的版本会一直加入新的功能。在Alpha版之后推出。
- α、β、λ常用来表示软件测试过程中的三个阶段,α是第一阶段,一般只供内部测试使用;β是第二个阶段,已经消除了软件中大部分的不完善之处,但仍有可能还存在缺陷和漏洞,一般只提供给特定的用户群来测试使用;λ是第三个阶段,此时产品已经相当成熟,只需在个别地方再做进一步的优化处理即可上市发行。
支持的浏览器
- Firefox 3.5+
- Google Chrome
- Opera 12+
- IE9+
- Safari 6+
贴上代码
html代码结构
<h2 onclick="aa();">点击复制图片</h2>
<h2 onclick="bb();">点击下载图片</h2><div id="capture" style="padding: 10px; background: #f5da55"><h4 style="color: #000; ">Hello world!</h4><img src="abc.jpg" width="200" height="200"><!-- 图片只能放在当前服务器才能用 -->
</div>
js代码结构
function aa(){html2canvas(document.getElementById('capture'), {onrendered: function(canvas) {canvas.setAttribute('id','thecanvas'); //添加属性document.body.appendChild(canvas);},background: "#ffffff", //canvas的背景颜色,如果没有设定默认透明logging: true, //在console.log()中输出信息width: 300, //图片宽height: 300, //图片高useCORS: true, // 【重要】开启跨域配置});
}function bb(){var oCanvas = document.getElementById("thecanvas");/* 参考Canvas2Image.saveAsPNG(oCanvas); // 这将会提示用户保存PNG图片Canvas2Image.saveAsJPEG(oCanvas); // 这将会提示用户保存JPG图片Canvas2Image.saveAsBMP(oCanvas); // 这将会提示用户保存BMP图片// 返回一个包含PNG图片的<img>元素var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true); // 返回一个包含JPG图片的<img>元素var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true); // 返回一个包含BMP图片的<img>元素var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true); // 这些函数都可以接受高度和宽度的参数// 可以用来调整图片大小// 把画布保存成100x100的png格式Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);*//*自动保存为png*/// 获取图片资源var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');saveFile(img_data1, 'richer.png');
}// 保存文件函数
var saveFile = function(data, filename){var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');save_link.href = data;save_link.download = filename;var event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);save_link.dispatchEvent(event);
};
这个插件几点的坑
- 1、如果你截取的网页中有图片和文字,在本地测试时生成图片时,网页中的图片截取出来竟然是空白?
(心里在想:什么狗屁插件根本不管用 图片都截取不了)
原因:程序必须放在服务器下运行,不然的话网页中的图片是出不来的
html2canvas 只能在服务器中抓取img
- 2、js的版本问题?
这个版本必须要用稳定版的,不能用最高的版本,因为那应该是测试版。最好用稳定版的!
用的版本不对的话,很多功可能用不了。
html2canvas加上canvas2image保存网页为图片相关推荐
- html2canvas 和 Canvas2Image实现网页截屏下载图片功能(简单小例子)
效果图 代码 style样式 <style>* {margin: 0;padding: 0;}#originalDOM {width:500px;height:300px;line-hei ...
- 八、Vue中使用 html2canvas 和 canvas2image 实现网页截屏
一.html转为canvas 1.安装 html2canvas cnpm install html2canvas --save 2.引入 html2canvas // 引入 import html2c ...
- 使用html2canvas,将页面转换成图片的采坑记录(Web/Taro h5)
使用html2canvas将页面转换成图片的采坑记录 "html2canvas": "^1.4.1","@tarojs/taro": &qu ...
- H5页面使用html2canvas实现div生成为图片,保存到手机
在做微信公众号H5页面时,需求要求html页面生成base64图片,并保存到手机相册中.之前没做过,在网上搜了相关的资料.了解到了html2canvas.js. html2canvas首先将页面生成c ...
- H5通过html2canvas,canvas2image生成图片
首先安装html2canvas,canvas2image npm i html2canvas npm i canvas2image 复制代码 引用 import html2canvas from 'h ...
- 将html保存为图片,html2canvas 将html代码转为图片并保存下来
html2canvas 将html代码转为图片并保存下来 发布时间:2018-05-22 10:15, 浏览次数:421 , 标签: html canvas 只是测试了下,在 谷歌和360上都可以,但 ...
- Vue使用html2Canvas和canvas2Image下载二维码会模糊的问题解决方法
Vue使用html2Canvas和canvas2Image下载二维码会模糊的问题解决方法 参考文章: (1)Vue使用html2Canvas和canvas2Image下载二维码会模糊的问题解决方法 ( ...
- Vue使用html2canvas将Dom转化为图片
Vue使用html2canvas将页面转化为图片 工具: 官网入口 一.下载 npm install --save html2canvas 二.使用 <template><div&g ...
- 怎样给Tab Control控件加上背景颜色或图片
如果不懂Tab控件添加选项卡(属性页)的请看这篇文章:http://blog.csdn.net/qq_18297675/article/details/50991413 这里我就直接在添加好选项卡的基 ...
- 图片怎么转为html格式,Win10如何保存网页为图片?Html页面转为图片格式的方法...
Win10如何保存网页为图片?实际上,如果用户安装过一些虚拟打印机可以直接打印为图片格式(见方法一),当然,如果用户没有安装任何虚拟打印机,则可以使用直接保存的方法将其保存为图片,该操作需要第三方浏览 ...
最新文章
- js函数声明和函数表达式的区别
- lduan Exchange 2013 公共文件夹(十)
- oracle约束 关闭,Oracle约束管理脚本
- 将数据导入到mysql_Mongodb数据导入到mysql
- jenkins手把手教你从入门到放弃02-jenkins在Windows系统安装与配置
- 存档:命令行程序的路径参数不能有空格
- LeetCode 求解电话号码组合(分治法求解)
- 2019年前端面试都聊啥?一起来看看
- Mysiam锁模式 innodb锁模式 是什么区别
- Android学习日志(一)第一行代码
- Install Tcpping on Linux
- PR VV 同行评审验证确认 用实例学CMMI V2.0
- IDEA删除文件如何恢复
- 9个offer,12家公司,35场面试,从微软到谷歌,我的求职之路!
- linux telnet命令 220,Linux使用telnet命令的方法(2)
- asp.net+mvc+html辅助,ASP.NET MVC使用Ajax的辅助的解决方法
- C++2022NOC之初赛数字规律
- 网络安全:namp扫描工具
- awk】1-awk基础篇(又名UNIX.Shell.awk)
- 在Linux中安装JKD(详细教学)
热门文章
- C++实现求解逻辑表达式的真值表、主析取范式、主合取范式
- 盖洛普Q12测评法(转载)
- 毕业设计-基于汇编语言的at89c52单片机可调数字钟的设计,基于AT89S52单片机数字钟的仿真设计(汇编语言程序)...
- solidworks2013安装
- mysql读写分离ppt_MYSQL主从复制和读写分离ppt课件
- zotero中的标准和规范应该用什么类型
- SREng 使用指南(三)系统修复的详细解说
- 风投围猎移动互联网:初现估值泡沫与马太效应
- 区块链将成为互联网基础协议,类似于TCP/IP、HTTP
- Node.js+Express+MongoDB 建站实例