【uniapp】【微信小程序】wxml-to-canvas

真是搞吐了，研究了整整两天，困死我了

 本来使用生成二维码插件好好的，插件页也支持导出二维码图片，可是领导说要带上文件的名称，那就涉及html转图片了，当然也可以改二维码插件的源码，不过源码做了混淆，看晕了，放弃了。

试了将微信的原生插件wxml-to-canvas引入uniapp项目，最后捣鼓了好久没捣鼓好，因为微信小程序原生的插件由wxml、wxss文件组成的，不能直接引入page.vue，那就把它放到生成的微信小程序项目文件夹下，可是这样不是一编译又回到解放前么？

后来查到可以将微信小程序的原生插件放在wxcomponents目录下，并且在pages.json中对应的页面配置usingComponents，可是项目跑起来少包了，缺少widget-ui，烦死了，最后跑起来还是报错找不到插件，也许我离黄金只剩一厘米，我还是选择放弃。

最后回到插件市场下载x-wxml-to-canvas插件，一开始也是用这个插件但是各种报错，现在只能回头再尝试，毕竟2000多的下载量，该是有一定含金量的。于是~打断点，跟代码——发现是插件原代码有点点点点缺陷，稍微改了下...

好家伙，给我整出来了，有view有image，nice~

以下是我记得的x-wxml-to-canvas插件的修改点

data() {
			return {
				canvasId: 'canvas',
				timeId: null,
				canvas: {},
				ctx: null,
				boundary: {}
			};
		},　　

注意插件方法的调用顺序（注释掉的代码也是可用的，是直接保存到相册）：

createPoster() {
			this.$refs.xWxmlToCanvas.renderToCanvas();
			this.$refs.xWxmlToCanvas.canvasToTempFilePath(); //生成图片
			this.$refs.xWxmlToCanvas.getCanvasImage().then(res => {
				uni.previewImage({
					current: 0,
					urls: [res],
					fail: err => {
						this.$modal.msgError(this.$t('picture-preview-failed'));
					}
				});
				// this.$refs.xWxmlToCanvas.saveImageToPhotosAlbum(res, this.fileName, saveRes => {
				// 	this.$modal.msg('保存成功');
				// });
			});
		}　

因为我的二维码图片是动态的，所以我的wxml模板也是动态生成的

previewImage() {
			return this.$refs.wQrcode.GetCodeImg().then(res => {
				const tempFilePath = res.tempFilePath;
				this.initWxml(tempFilePath);
				this.wxmlIsReady = true;
			});
		},　

因为wxml-to-canvas插件的初始化是在mounted阶段进行，为了防止他在我获取二维码图片临时地址前做无用功，加了个flag(wxmlIsReady)

<XWxmlToCanvas v-if="wxmlIsReady" ref="xWxmlToCanvas" :hide="true" :width="500" :height="style.container.height" :xStyle="style" :xWxml="wxml" />

　　

 

你们看到的图片似乎带了box-shadow,wxml-to-canvas不支持css的box-shadow,我只能自己用view一圈一圈画了，边缘不够模糊，还要继续改进下。