vue - html2canvas 将页面表单数据保存为图片下载（可以定义成对象再调用）1.1

目录

前言

图片转化下载

html页面转化成图片

图片直接下载

方法合并

抽象成对象去调用

Brower对象（brower.js）

最终效果

参考文章

总结

---

• 前言

我们在手机中经常会看到，长按页面会有一个图片保存的功能，那么将html页面转化成图片，并且下载是如何实现的呢？

• 图片转化下载

• html页面转化成图片

1. 1 第一步：html页面转化成图片

首先我们要用到html2canvas.js

npm install html2canvas –save

如果是vue工程则直接安装，如果不是vue工程，可以在其他vue工程中安装，然后在node_modules中找到对应的js复制到自己的工程中，而我是非vue工程走的是后者，如下图所示：

我将js放到对应的工程目录下，然后开始写代码：

1. 1 定义生成数据范围 

1.  2 新增createImg按钮

<el-button size="mini" type="primary" @click="createImg()">图片生成 </el-button>

1.  3 实现createImg方法（这里我定义了一个ImageUrl变量在data里面）

createImg(){
	html2canvas(this.$refs.imageWrapper).then(canvas => {
		let dataURL = canvas.toDataURL("image/png");
		console.log(dataURL)
		if (dataURL !== "") {
			this.imageUrl = dataURL;
		}
	});
},

1.  4 测试结果

现在我们面临的问题是，怎么不是通过