阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      微信⼩程序 图⽚导出

      问题

      微信⼩程序 图⽚导出

      答案

      这是⼀种常⻅的引流⽅式,⼀般同时会在图⽚中附加⼀个⼩程序⼆维码。

      基本原理

      借助 canvas 元素,将需要导出的样式⾸先在 canvas 画布上绘制出来 ( api 基本和h5 保持⼀致,但有轻微差异,使⽤时注意即可

      借助微信提供的 canvasToTempFilePath 导出图⽚,最后再使⽤saveImageToPhotosAlbum (需要授权)保存图⽚到本地

      如何优雅实现

      绘制出需要的样式这⼀步是省略不掉的。但是我们可以封装⼀个绘制库,包含常⻅图形的绘制,例如矩形,圆⻆矩形,圆, 扇形, 三⻆形, ⽂字,图⽚减少绘制代码,只需要提炼出样式信息,便可以轻松的绘制,最后导出图⽚存⼊相册。笔者觉得以下这种⽅式绘制更为优雅清晰⼀些,其实也可以使⽤加⼊⼀个type参数来指定绘制类型,传⼊的⼀个是样式数组,实现绘制。

      结合上⼀步的实现,如果对于同⼀类型的卡⽚有多次导出需求的场景,也可以使⽤⾃定义组件的⽅式,封装同⼀类型的卡⽚为⼀个通⽤组件,在需要导出图⽚功能的地⽅,引⼊该组件即可。

      class CanvasKit {
          constructor() {
          }
          drawImg(option = {}) {
              ...
              return this
          }
          drawRect(option = {}) {
              return this
          }
          drawText(option = {}) {
              ...
              return this
          }
          static exportImg(option = {}) {
              ...
          }
      }
      let drawer = new CanvasKit('canvasId').drawImg(styleObj1).drawText(styleOb
      drawer.exportImg()
      

      注意事项

      ⼩程序中⽆法绘制⽹络图⽚到 canvas 上,需要通过 downLoadFile 先下载图⽚ 到本地临时⽂件才可以绘制

      通常需要绘制⼆维码到导出的图⽚上,有⼀种⽅式导出⼆维码时,需要携带的参数 必须做编码,⽽且有具体的⻓度( 32 可⻅字符)限制,可以借助服务端⽣成 短 链接 的⽅式来解决

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录