devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序-生成保存图文海报-canvas生成图片、二维码、自定义文字样式_小程序canvas生成二维码海报

作者：2023面试高手 | 2024-05-28 22:54:18

赞

踩

小程序canvas生成二维码海报

代码仓库：https://gitee.com/DerekAndroid/miniProgramAgen/tree/master/pages/canvasTest

效果：

 点击保存图片-    

//步骤流程： 1.把二维码生成临时图片文件-2.canvas画文字+二维码图片-3.保存新的临时文件-4.保存到相册

canvas图片宽度根据设备进行适配

let unit = systemInfo.screenWidth / 375

以375px基准进行宽度适配：切换iphone6和iphone6plus对面效果

iphone6:  iphone6plus: 

canvas两种方式实现文字居中：

1.measureText测量文字宽度实现文字居中

  1.     /********文字居中方式1:measureText测量文字宽度实现文字居中 */
  2.     ctx.setFillStyle('#000')
  3.     var name = 'textAlign文字居中';
  4.     ctx.font = '28px serif'
  5.     var measureText = ctx.measureText(name);//测量文字宽度
  6.     console.warn('measureText', measureText)
  7.     //思路：（父类宽度-文字宽度）/2=文字居中
  8.     //在iphone6plus上，measureText.width= 238是实际的宽度，需要先转换成iPhone6的基准尺寸，然后再计算，然后再转换成iphone6plus是尺寸
  9.     ctx.fillText(name, (375 - measureText.width / unit) / 2 * unit, 150 * unit)

2.textAlign文字居中

  1.     /********文字居中方式2:textAlign文字居中 */
  2.     ctx.setFillStyle('#000')
  3.     var name = 'textAlign文字居中';
  4.     ctx.font = '28px serif'
  5.     ctx.textAlign = "center";//基于中线文字左右两边居中
  6.     // ctx.setTextAlign('center');
  7.     ctx.fillText(name, 375 / 2 * unit, 210 * unit) //居中开始写文字
  8.     ctx.textAlign = "left"; //使用完后恢复左对齐

wxml:

  1. <view>
  2.   <view>生成展示二维码js库：https://github.com/yingye/weapp-qrcode</view>
  3.   <canvas class="imageTestMa show" canvas-id="canvas"></canvas>
  4. </view>
  5. <button bindtap="commitTamp">保存图片</button>
  6. <!-- 1.把二维码生成临时图片文件-2.canvas画文字+二维码图片-3.保存新的临时文件-4.保存到相册 -->
  7. <canvas class="canvas" canvas-id="myCanvas"></canvas>

js：

  1. // pages/authSetting/authSetting.js
  2. import drawQrcode from './weapp.qrcode'
  3. Page({
  4.  
  5.   data: {
  6.   },
  7.  
  8.   onLoad: function (options) {
  9.     this.showQrcode()
  10.     // this.canvasPromise()
  11.   },
  12.  
  13.   onShow: function () {
  14.     // this.drawCanvas()
  15.   },
  16.  
  17.   async commitTamp() {
  18.     wx.showLoading({
  19.       title: '保存中',
  20.     })
  21.     setTimeout(function () {
  22.       wx.hideLoading()
  23.     }, 2000)
  24.     let self = this;
  25.     //步骤流程： 1.把二维码生成临时图片文件-2.canvas画文字+二维码图片-3.保存新的临时文件-4.保存到相册
  26.  
  27.     //1.把二维码生成临时图片文件
  28.     var codePath = await self.canvasPromise();
  29.     //2.canvas画文字+二维码图片-3.保存新的临时文件
  30.     var tempFilePath = await self.drawCanvas(codePath);
  31.     //4.保存到相册
  32.     // var tempFilePath = self.checkScopeAsync(tempFilePath);
  33.     var options = { scope: 'scope.writePhotosAlbum', content: '请前往设置页打开保存相册开关' }
  34.     var flag = await this.getSettingRecord(options)
  35.     if (flag) {
  36.       this.saveImageToPhotosAlbum(tempFilePath)
  37.     }
  38.   },
  39.  
  40.   // 0.显示二维码
  41.   showQrcode() {
  42.     let systemInfo = wx.getSystemInfoSync();
  43.     console.warn('systemInfo', systemInfo, this.json)
  44.     let unit = systemInfo.windowWidth / 375;
  45.     var text = '312wqeqwe';
  46.     drawQrcode({
  47.       width: 160 * unit,
  48.       height: 160 * unit,
  49.       canvasId: 'canvas',
  50.       text: text,
  51.       correctLevel: 3,
  52.       callback(e) {
  53.         console.warn('callback')
  54.       }
  55.     })
  56.   },
  57.  
  58.   //1.把二维码生成临时图片文件
  59.   canvasPromise() {
  60.     var self = this;
  61.     return new Promise((resolve, reject) => {
  62.       let systemInfo = wx.getSystemInfoSync();
  63.       let unit = systemInfo.windowWidth / 375;
  64.       wx.canvasToTempFilePath({
  65.         x: 0,
  66.         y: 0,
  67.         width: 160 * unit,
  68.         height: 160 * unit,
  69.         canvasId: 'canvas',
  70.         success(res) {
  71.           console.warn('canvas', res);
  72.           resolve(res.tempFilePath)
  73.         },
  74.         fail(res) {
  75.           console.warn('canvas=Fail', res);
  76.         },
  77.       })
  78.     })
  79.   },
  80.  
  81.   //2.canvas画文字+二维码图片-3.保存新的临时文件
  82.   drawCanvas(codePath) {
  83.     let self = this;
  84.     var ctx = wx.createCanvasContext("myCanvas", self);
  85.     var systemInfo = wx.getSystemInfoSync();
  86.     //以375px基准进行宽度适配：切换iphone6和iphone6plus对面效果
  87.     let unit = systemInfo.screenWidth / 375
  88.  
  89.     ctx.setFillStyle('#000')
  90.     var name = '使用固定的px值';
  91.     ctx.font = '22px serif'
  92.     ctx.fillText(name, 10 * unit, 20 * unit)
  93.  
  94.     ctx.setFillStyle('#1086FF')
  95.     ctx.fillRect(0, 40, 188, 10);
  96.     ctx.fillRect(0, 45, 375, 5);
  97.     ctx.fillRect(0, 90, 188 * unit, 10);
  98.     ctx.fillRect(0, 95, 375 * unit, 5);
  99.  
  100.     ctx.setFillStyle('#000')
  101.     var name = '根据不同屏幕动态的转换对应的px值';
  102.     ctx.font = '22px serif'
  103.     ctx.fillText(name, 10 * unit, 75 * unit)
  104.  
  105.     ctx.setFillStyle('#1086FF')
  106.     ctx.fillRect(0, 125 * unit, 375 * unit, 50 * unit);
  107.  
  108.     ctx.setFillStyle('#000')
  109.     var name = 'measureText测量文字宽度实现文字居中';
  110.     ctx.font = '22px serif'
  111.     ctx.fillText(name, 10 * unit, 115 * unit)
  112.  
  113.     ctx.setFillStyle('#000')
  114.     var name = 'textAlign文字居中';
  115.     ctx.font = '28px serif'
  116.     var measureText = ctx.measureText(name);//测量文字宽度
  117.     console.warn('measureText', measureText)
  118.     //思路：（父类宽度-文字宽度）/2=文字居中
  119.     //在iphone6plus上，measureText.width= 238是实际的宽度，需要先转换成iPhone6的基准尺寸，然后再计算，然后再转换成iphone6plus是尺寸
  120.     ctx.fillText(name, (375 - measureText.width / unit) / 2 * unit, 150 * unit)
  121.  
  122.     ctx.setFillStyle('#1086FF')
  123.     ctx.fillRect(0, 185 * unit, 375 * unit, 50 * unit);
  124.  
  125.     ctx.setFillStyle('#000')
  126.     var name = 'textAlign文字居中';
  127.     ctx.font = '28px serif'
  128.     ctx.textAlign = "center";//基于中线文字左右两边居中
  129.     // ctx.setTextAlign('center');
  130.     ctx.fillText(name, 375 / 2 * unit, 210 * unit) //居中开始写文字
  131.     ctx.textAlign = "left"; //使用完后恢复左对齐
  132.  
  133.  
  134.     ctx.setFillStyle('#1086FF')
  135.     ctx.fillRect(112 * unit, 310 * unit, 150 * unit, 150 * unit);
  136.  
  137.     //把生成好的临时二维码图片地址，画二维码
  138.     codePath && ctx.drawImage(codePath, 112 * unit, 270 * unit, 150 * unit, 150 * unit)
  139.     // ctx.fillRect(112*unit, 460*unit, 150*unit, 150*unit);
  140.  
  141.     //设置固定的高度375*667,这是设计图纸的尺寸，防止生成的图片变形
  142.     let screenWidth = 375 * unit;
  143.     let screenHeight = 667 * unit;
  144.     //把画板内容绘制成图片，并回调 画板图片路径
  145.     return new Promise((resolve, reject) => {
  146.       ctx.draw(false, () => {
  147.         wx.canvasToTempFilePath({
  148.           x: 0,
  149.           y: 0,
  150.           width: screenWidth * unit,
  151.           height: screenHeight * unit,
  152.           destWidth: screenWidth * unit * 10, // 设置大一点清晰度会高
  153.           destHeight: screenHeight * unit * 10,
  154.           canvasId: 'myCanvas',
  155.           success(res) {
  156.             console.warn('canvasToTempFilePathRes', res);
  157.             resolve(res.tempFilePath)
  158.           },
  159.           fail(res) {
  160.             console.warn('canvasToTempFilePathResFail', res);
  161.             reject()
  162.           },
  163.         })
  164.       })
  165.     })
  166.   },
  167.  
  168.   //申请获取保存到相册权限-同步函数方式
  169.   async checkScopeAsync(tempFilePath) {
  170.     var options = { scope: 'scope.writePhotosAlbum', content: '请前往设置页打开保存相册开关' }
  171.     var flag = await this.getSettingRecord(options)
  172.     console.warn('保存相册权限flag=', flag)
  173.     if (flag) {
  174.       this.saveImageToPhotosAlbum(tempFilePath)
  175.     }
  176.   },
  177.  
  178.  
  179.   //检查相册权限
  180.   getSettingRecord(options = { scope: 'scope.record', content: '请前往设置页打开麦克风' }) {
  181.     var self = this;
  182.     return new Promise((resolve, reject) => {
  183.       wx.getSetting({
  184.         success: (res) => {
  185.           let auth = res.authSetting[options.scope]
  186.           console.warn('scope.record=', auth, typeof auth)
  187.           if (auth === true) { // 用户已经同意授权
  188.             resolve(true)
  189.           }
  190.           else if (auth === undefined) {// 首次发起授权
  191.             wx.authorize({
  192.               scope: options.scope,
  193.               success() {
  194.                 resolve(true)
  195.               },
  196.               fail(res) {
  197.               }
  198.             })
  199.           }
  200.           else if (auth === false) { // 非首次发起授权，用户拒绝过 => 弹出提示对话框
  201.             wx.showModal({
  202.               title: '授权提示',
  203.               content: options.content,
  204.               success: (tipRes) => {
  205.                 if (tipRes.confirm) {
  206.                   wx.openSetting({
  207.                     success: (settingRes) => {
  208.                       if (settingRes.authSetting[options.scope]) {
  209.                         resolve(true)
  210.                       }
  211.                       console.warn('settingRes', settingRes)
  212.                     },
  213.                   })
  214.                 }
  215.               }
  216.             })
  217.           }
  218.         },
  219.       })
  220.     })
  221.  
  222.   },
  223.  
  224.   //画板路径保存成功后，调用方法吧图片保存到用户相册
  225.   saveImageToPhotosAlbum(filePath) {
  226.     let self = this;
  227.     return new Promise((resolve, reject) => {
  228.       wx.saveImageToPhotosAlbum({
  229.         filePath: filePath,
  230.         success(res) {
  231.           wx.showToast({
  232.             title: '已保存',
  233.             icon: 'none',
  234.             duration: 2000,
  235.           })
  236.           resolve();
  237.         },
  238.         fail(res) {
  239.           console.warn('saveImageToPhotosAlbum-res', res);
  240.           //技巧2：加强展示时间
  241.           wx.showToast({
  242.             title: '保存失败' + res.errMsg,
  243.             icon: 'none',
  244.             duration: 2000,
  245.           })
  246.           reject();
  247.         },
  248.         complete(res) {
  249.           console.warn('complete-saveImageToPhotosAlbum-res', res);
  250.         }
  251.       })
  252.     })
  253.   },
  254.  
  255. })

wxss：

  1. /* pages/authSetting/authSetting.wxss */
  2. .canvas{
  3.   width: 750rpx;
  4.   height: 1334rpx;
  5.   margin-top: 20rpx;
  6.   border: 1rpx solid #666;
  7. }
  8.  
  9. .imageTestMa{
  10.   height: 320rpx;
  11.   width: 320rpx;
  12.   margin: 0rpx 0rpx 40rpx 0rpx;
  13.   border: 1px solid aqua;
  14. }

参考：生成展示二维码js库：https://github.com/yingye/weapp-qrcode

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/639611
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号