官方网站
https://html2canvas.hertzen.com/
1:直接下载html2canvas插件
直接点击html2canvas.min.js,然后直接ctrl+s进行保存即可
2:使用npm进行下载
npm install html2canvas
二:html2canvas使用介绍
在html2canvas中主要使用两种方法
1:将html内容写入到canvas中
html2canvas(element,options).then((canvas) =>{})
参数说明:
element:需要将html内容写入canvas的jQuery对象
options:配置信息
常用的配置基本信息:
scale:缩放比例,默认为1
allowTaint:是否允许跨域图像污染画布,默认为false
useCORS:是否尝试使用CORS从服务器加载图像,默认为false
width:canvas画布的宽度,默认为jQuery对象的宽度
height:canvas画布的高度,默认为jQuery对象的高度
backgroundColor:/画布的背景色,默认为透明(#fff),参数可以为#表示的颜色,也可以使用rgba
2:将canvas画布信息转化为base64格式图片
canvas.toDataURL("image/png")
如果你的html内容中有指定的内容不写入到canvas中的话,你可以给标签添加如下属性
data-html2canvas-ignore="true"
2、在需要的组件中引入html2canvas
// 导入整个模块的内容import * as html2canvas from 'html2canvas';
3、定义方法,将数据转换为canvas
// #mainTable是数据表格的idtakeScreenShot() { // 使用html2canvas插件,将数据源中的数据转换成画布。 html2canvas(document.querySelector("#mainTable")).then(canvas => { // 修改生成的宽度 canvas.style.width = "1000px"; console.log(canvas, "生成的画布文件"); this.canvasImg = canvas.toDataURL("image/png"); }); } // 然后给初始化的public canvasImg: any = ""; 复制,他就是图片地址。// 展示图片 <img src="{{canvasImg}}" />
4、将图片下载到本地,定义转换图片格式方法。
// filename: 文件名称, content: canvas图片流地址 downloadFile(filename, content) { var base64Img = content; var oA = document.createElement('a'); oA.href = base64Img; oA.download = filename; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); oA.dispatchEvent(event); } // 方法调用 saveImgLocal() { this.downloadFile("导出图片", this.canvasImg); }
5、下载
<button label="下载" pButton (click)="saveImgLocal()"></button>
6、设置画布大小
var shareContent = document.getElementById("mainTable");//需要截图的包裹的(原生的)DOM 对象 var width = shareContent.offsetWidth; //获取dom 宽度 var height = shareContent.offsetHeight; //获取dom 高度 var canvas = document.createElement("canvas"); //创建一个canvas节点 var scale = 1; //定义任意放大倍数 支持小数 canvas.width = width * scale; //定义canvas 宽度 * 缩放 canvas.height = height * scale; //定义canvas高度 *缩放 canvas.getContext("2d").scale(scale, scale); //获取context,设置scale var opts = { scale: scale, // 添加的scale 参数 canvas: canvas, //自定义 canvas logging: true, //日志开关 width: width, //dom 原始宽度 height: height //dom 原始高度 }; html2canvas(shareContent, opts).then(canvas => { this.canvasImg = canvas.toDataURL("image/png"); console.log(canvas) });
自已调用的过程:
<script src="assets/myassets/html2canvas/html2canvas.min.js"></script>
shareContent = .()width = shareContent.height = shareContent.canvas = .()scale = canvas.= width * scalecanvas.= height * scalecanvas.().(scalescale)opts = { : scale: canvas: : width: height }html2canvas(shareContentopts).(canvas => { imgUri = canvas.().(canvas) .(imgUri) newwindow = .()(shareContent !== && newwindow) { newwindow...= shareContent.newwindow.()newwindow.()} })
联系客服