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

本来使用生成二维码插件好好的,插件页也支持导出二维码图片,可是领导说要带上文件的名称,那就涉及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一圈一圈画了,边缘不够模糊,还要继续改进下。