保姆级教学 uniapp绘制二维码海报并保存至相册,真机正常展示图片二维码

一、获取二维码

javascript 复制代码
      uni.request({
        url: `https://api.weixin.qq.com/wxa/getwxacode?access_token=${getStorage("token")}`,
        responseType: "arraybuffer",
        method: "POST",
        data: {
          path: "/pages/index/index"
        },
        success(res) {
          // 转换为 Uint8Array 类型的数组
          const arrayBuffer = new Uint8Array(res.data)

          // 转换为 Base64 编码的字符串
          const base64 = uni.arrayBufferToBase64(arrayBuffer)

          // 缓存至本地
          state.image = base64
        },
        fail(err) {
          console.log(err, "err")
        }
      })

代码仅作示例

以上代码作用就是,拿到后端给的base64格式的图片,用做绘图

二、绘制画布

javascript 复制代码
    const handleCanvas = () => {
      //初始化画布
      const ctx = uni.createCanvasContext('myCanvas');
      ctx.setFillStyle("rgba(96, 216, 254, 1)")
      ctx.fillRect(0, 0, uni.upx2px(750), uni.upx2px(1120))

      //外边框
      const mx = uni.upx2px(55)
      const my = uni.upx2px(332);
      const mwidth = uni.upx2px(640);
      const mheight = uni.upx2px(640);
      const mradius = uni.upx2px(32);
      const mColor = "#DFF3FF"
      _border(ctx, mx, my, mwidth, mheight, mradius, mColor)

      // 内边框
      const px = uni.upx2px(105)
      const py = uni.upx2px(382);
      const pwidth = uni.upx2px(540);
      const pheight = uni.upx2px(540);
      const pradius = uni.upx2px(32);
      const pColor = "#FFF"
      _border(ctx, px, py, pwidth, pheight, pradius, pColor)

      //二维码  
      _QRCode(ctx, state.image)
        
      // 绘制画布
      ctx.draw()
    }


     // 绘制边框   参数分别为  画布对象 画布x轴起点 画布y轴起点 画布宽度 画布高度 圆角边框 背景色
    const _border = (ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number, color: string) => {
      ctx.beginPath();
      ctx.moveTo(x + radius, y);
      ctx.lineTo(x + width - radius, y);
      ctx.arcTo(x + width, y, x + width, y + radius, radius);
      ctx.lineTo(x + width, y + height - radius);
      ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
      ctx.lineTo(x + radius, y + height);
      ctx.arcTo(x, y + height, x, y + height - radius, radius);
      ctx.lineTo(x, y + radius);
      ctx.arcTo(x, y, x + radius, y, radius);
      ctx.closePath();
      ctx.fillStyle = color;
      ctx.fill();
    }


    const _QRCode = (ctx, data) => {
      // 获取文件管理器
      const fsm = wx.getFileSystemManager();

      //  将 base64 字符串转成 ArrayBuffer对象
      const buffer = wx.base64ToArrayBuffer(data);

      // 文件系统中的用户目录路径 (本地路径)
      const fileName = wx.env.USER_DATA_PATH + '/share_img.png';

      fsm.writeFileSync(fileName, buffer, 'binary'); // 写入文件, 同步方法

      // 以上四行代码让其在真机上正常显示,因为canvas无法读取base64格式,需要先保存在文件管理器,拿到临时路径

      ctx.drawImage(fileName, uni.upx2px(135), uni.upx2px(412), uni.upx2px(480), uni.upx2px(480))
    }

1.复杂样式尽量使用图片引入ctx.drawImage("换成你本地图片的相对路径",...)

2.需要其他样式或者图片,自行添加,我这个应该还有个背景图的,在等UI出图

3.画布绘制的顺序需要注意下,后面覆盖的图形会把前面的图形在视觉上覆盖掉,所以二维码方法要写在最后面

三、保存至相册

javascript 复制代码
    const handleSave = () => {
      uni.showLoading({
        title: '正在生成海报',
        mask: true
      })
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: (res) => {
              uni.showToast({
                title: '保存成功',
                icon: 'none'
              })
            }
          })
        },
        complete(result) {
          uni.hideLoading()
        },
      })
    }
相关推荐
百思可瑞教育6 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
Q_Q196328847512 小时前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
百思可瑞教育14 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e15 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
00后程序员张15 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
不知名的前端专家20 小时前
uniapp原生插件 TCP Socket 使用文档
网络·tcp/ip·uni-app·netty
fakaifa21 小时前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版
2501_9160074721 小时前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview
fakaifa1 天前
CRMEB多门店 v3.3源码 无授权限制+PC端+uniapp前端
小程序·uni-app·商城小程序·技术教程·源码下载·crmeb多门店
编程迪1 天前
小说阅读系统Java源码 小说阅读软件开发 小说app小程序
小程序·uni-app·小说源码·小说系统·小说阅读app