vue 生成二维码 页面保存为海报

vue 生成二维码 页面保存为海报

页面需求：

• 在app，点击分享跳转页面， 在当前页面展示邀请人信息、生成可扫描跳转的二维码及其他信息，在站内外都可以将生成卡片保存到本地。

生成二维码 vue-qr 插件 地址：https://www.npmjs.com/package/vue-qr
此插件可以生成带logo的二维码
将页面保存为图片 使用 html2canvas 插件 地址： https://www.npmjs.com/package/html2canvas
此插件会将dom元素保存为图片

由于在线上环境， 资源路径被替换， 所需要生成为图片的dom图片元素资源用base64位编码， 否则会出现渲染空白的情况有接口获取的img 头像， 需要开启 允许跨域 允许画布污染等属性，最后， img 标签比 元素背景图片生成的要清晰并且可以引入的文件尺寸相对较大

	1.// 二维码生成引入
	import vueQr from "vue-qr";
	2. // dom
	<vue-qr
		class="twoCode twoCodeNone"
		ref="twoCode"
		:logoSrc="imageUrl"
		dotScale="0.9"
		:autoColor="false"
		:text="qrCodeText"
		:callback="callbackOk"
		margin="3"
	></vue-qr>
			
	3. // 注册为组件
	components: {
		vueQr
	}
    4. // 准备参数
	data() {
		return {
			qrCodeText： ‘www.baidu.com’,
			imageUrl: require("../../assets/img/card/logo.png"), // 二维码log
		}
	}

生成图片

import html2canvas from "html2canvas";

// 生成图片
let ref = this.$refs.box; // 获取要生成为图片的元素
var opts = {
	width: width,
	height: height,
	dpi: window.devicePixelRatio,
	allowTaint: true,
	useCORS: true,
	taintTest: true,
	backgroundColor: "rgba(0, 0, 0, 0)"
};
html2canvas(ref, opts).then(canvas => {
		let dataURL = canvas.toDataURL("image/png");
		this.imgUrl = dataURL; // 生成赋值
		// 可以在 此回调调用app 协议 保存
});

小技巧

如果要生成多张海报上都要存在同样的二维码， 可以先生成一张二维码，在回调中保存路径， 挨个插入；
sheng