经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
【uniapp】【微信小程序】wxml-to-canvas
来源:cnblogs  作者:WhoLovesAbby  时间:2023/9/18 9:04:38  对本文有异议

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

 本来使用生成二维码插件好好的,插件页也支持导出二维码图片,可是领导说要带上文件的名称,那就涉及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插件的修改点

  1. data() {
  2. return {
  3. canvasId: 'canvas',
  4. timeId: null,
  5. canvas: {},
  6. ctx: null,
  7. boundary: {}
  8. };
  9. },  

注意插件方法的调用顺序(注释掉的代码也是可用的,是直接保存到相册):

  1. createPoster() {
  2. this.$refs.xWxmlToCanvas.renderToCanvas();
  3. this.$refs.xWxmlToCanvas.canvasToTempFilePath(); //生成图片
  4. this.$refs.xWxmlToCanvas.getCanvasImage().then(res => {
  5. uni.previewImage({
  6. current: 0,
  7. urls: [res],
  8. fail: err => {
  9. this.$modal.msgError(this.$t('picture-preview-failed'));
  10. }
  11. });
  12. // this.$refs.xWxmlToCanvas.saveImageToPhotosAlbum(res, this.fileName, saveRes => {
  13. // this.$modal.msg('保存成功');
  14. // });
  15. });
  16. } 

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

  1. previewImage() {
  2. return this.$refs.wQrcode.GetCodeImg().then(res => {
  3. const tempFilePath = res.tempFilePath;
  4. this.initWxml(tempFilePath);
  5. this.wxmlIsReady = true;
  6. });
  7. }, 

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

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

原文链接:https://www.cnblogs.com/abby-lrwei/p/17706670.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号