【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一圈一圈画了,边缘不够模糊,还要继续改进下。

相关推荐
腾讯才子2 个月前
windows生成苹果私钥证书p12证书和profile文件的方法
hbuilderx·自有证书
Oliver尹5 个月前
3. uniapp开发工具的一些事
前端·uni-app·开发工具·hbuilderx·uniapp的开发工具
程知农6 个月前
[Uni-app] 微信小程序的圆环进度条
前端·微信小程序·uni-app·hbuilderx
爱机车的程序猿8 个月前
uni-app使用HBuilderX打包Web项目
java·linux·前端·nginx·uni-app·hbuilderx
依星net188.com8 个月前
HBuilderX 创建 uni-ui模板项目,为什么会提示下载失败
hbuilderx
软希网分享源码10 个月前
HBuilderX前端软件社区+Thinkphp后端源码
hbuilderx
不安分的羽毛1 年前
使用webpack-bundle-analyzer分析uni-app 的微信小程序包大小(HbuilderX运行)
webpack·微信小程序·uni-app·bundle·analyzer·包大小分析·hbuilderx