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