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

一、获取二维码

      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格式的图片,用做绘图

二、绘制画布

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

三、保存至相册

    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()
        },
      })
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/932065.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Unity类银河战士恶魔城学习总结(P166 Ailments FX 异常状态伤害粒子特效)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址:https://www.udemy.com/course/2d-rpg-alexdev/ 本章节创建了三种粒子特效,火焰,寒冰,雷电 主场景创建/特效/粒子 初始的例子特效 火焰 寒冰 雷电 En…

Java基于SpringBoot的网上订餐系统,附源码

博主介绍:✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&…

[笔记] Windows 上 Git 安装详细教程:从零开始,附带每个选项解析

Git 是目前最流行的分布式版本控制系统之一,广泛应用于软件开发和项目管理中。对于 Windows 用户来说,正确安装和配置 Git 是开始使用 Git 的第一步。本文提供一份详细的指南,帮助你在 Windows 系统上顺利安装 Git,并解释每个安装…

JavaScript编写css自定义属性

一、自定义属性 是在 CSS 中定义的变量,以 --开头。它们可以存储颜色、尺寸、字体等任何 CSS 值,并且可以在整个文档中重复使用。 :root {--primary-color: #3498db;--font-size: 16px; }body {color: var(--primary-color);font-size: var(--font-siz…

项目开发之Jenkins

文章目录 思考基础概述JenkinsMavenGit集成开发部署GitLab服务安装 实战1 新建任务需要的配置pipeline最后 思考 jenkis怎么连接github仓库? jenkis的作用是什么?基础 概述 定义:Jenkins是一款开源的持续集成(Continuous Integration&…

core Webapi jwt 认证

core cookie 验证 Web API Jwt 》》》》用户信息 namespace WebAPI001.Coms {public class Account{public string UserName { get; set; }public string UserPassword { get; set; }public string UserRole { get; set; }} }》》》获取jwt类 using Microsoft.AspNetCore.Mvc…

TCP/IP协议详解(小白)

TCP/IP协议详解 TCP/IP协议包含了一系列的协议,也叫TCP/IP协议族(TCP/IP Protocol Suite,或TCP/IP Protocols),简称TCP/IP。TCP/IP协议族提供了点对点的连结机制,并且将传输数据帧的封装、寻址、传输、路由…

Java项目实战II基于微信小程序的旅游社交平台(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 随着移动互联网的迅猛发展,旅游已经成为人…

jmeter配置

单接口运行没问题,但是批量执行100个线程数发现总是提示请求不合法 最后发现 需要将配置改成 正好回归一下这个配置: Ramp-Up时间(秒)的定义: Ramp-Up时间是指在JMeter测试中,所有指定的线程&#xff08…

SpringBoot 项目如何集成 JWT

SpringBoot 项目如何集成 JWT JWT JSON Web Token (JWT) 是一个开放标准(RFC 7519),它定义了一种紧凑的、自包含的方式,用于作为 JSON 对象在各方之间安全地传输信息。 在 Oauth2 中,其实就是返回访问令牌 (access_token&#…

【innodb阅读笔记】之 Innodb行记录格式 (Compact 行格式)

一、Innodb行记录格式 innodb 存储引擎同大多数数据库一样,记录是以行的形式存储的。这意味着页中保存的一行行的数据。在 mysql 5.7 版本中,默认格式为 Dynamic,可以通过命令查看当前表的行格式,其中 row_format 表示当前表行记录…

交易所 Level-2 历史行情数据自动化导入攻略

用户部署完 DolphinDB 后,需要将历史股票数据批量导入数据库,再进行数据查询、计算和分析等操作。DolphinDB 开发了 ExchData 模块,主要用于沪深交易所 Level-2 行情原始数据的自动化导入,目前已支持的数据源包括: 沪…

加载内核映像文件

将kernel转换成elf文件格式,不能直接从loader直接跳转到0x100000,需要解析,提取出代码和数据出来,放到0x10000(64kb)的位置,1M的位置只是存放elf文件的位置。 4.10加载内核映像文件2 common/el…

【数字电路与逻辑设计】实验一 序列检测器

文章总览:YuanDaiMa2048博客文章总览 【数字电路与逻辑设计】实验一 序列检测器 一、实验内容二、设计过程(一)作出状态图或状态表(二)状态化简(三)状态编码 三、源代码(一&#xff…

怎么实现邮件营销自动化?

邮件营销能够出色地帮助我们与客户建立良好关系。无论是新客户还是老客户,都可以通过邮件来达成较为良好的客户关系。然而,从消费者的角度来看,每个人都有自己独特的习惯和特点,没有人希望收到千篇一律、营销意味过重的邮件。因此…

【LeetCode: 203. 移除链表元素 + 链表】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

【opencv入门教程】12. 矩阵初始化

文章选自: 一、 数据类型 建立矩阵必须要指定矩阵存储的数据类型,图像处理中常用的几种数据类型如下:包括数据位深度8位、32位,数据类型U:uchar、F:float型以及通道数C1:单通道、C3:三通道、C4&#xff…

Jupyter Notebook认识、安装和启动以及使用

Jupyter Notebook认识、安装和启动以及使用 Jupyter Notebook认识、安装和启动以及使用 Jupyter Notebook认识、安装和启动以及使用一、认识Jupyter Notebook1.1 Jupyter Notebook概述1.2 Jupyter Notebook 重要特性(1)交互式代码执行(2)支持多种编程语言(3)富文本编辑(4)代码高…

SQL语句中AND与OR操作符的优先级问题

在SQL中,当AND和OR操作符同时出现时,优先级的处理可能会导致查询结果与预期不符。为了说明这一问题,我们可以看一个实际的例子。 假设需要查询价格在10美元及以上,且由DLL01或BRS01制造的所有产品。可以使用如下SQL语句&#xff…