微信小程序2.9.0基础库canvas2D新API,生成海报保存到手机功能实现

news2025/1/19 5:10:41

        canvasToTempFilePath的官方文档写着在 draw()回调里调用该方法才能保证图片导出成功。文档地址:wx.canvasToTempFilePath(Object object, Object this) | 微信开放文档

        我在这里面使用的canva  获取canvas实例,使用的官方的代码。用一个变量canvas保存实例,后续保存时会调用。

data () {
    return {
      canvas: null // 实例
    }
},
onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        this.setData({
          canvas
        })
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)
        this.drawBg(canvas, ctx); // 绘制图片
      })
  },

引入图片需要调用canvas.createImage方法, 具体使用方法如下:

Image Canvas.createImage()
创建一个图片对象。 支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。

drawBg (canvas, ctx) {
    const img = canvas.createImage() 
    img.src = '/image/friend.jpg'
    img.onload = () => {
      ctx.drawImage(img, 0, 0, 500, 500);
    }
  },

保存时注意wx.canvasToTempFilePath要传递canvas参数,为canvas 2d 实例 

 canvas Object 否 画布标识,传入 canvas 组件实例 (canvas type=“2d” 时使用该属性)。

 save () {
    wx.canvasToTempFilePath({
      canvas: this.data.canvas, // 使用2D 需要传递的参数
      success(res) {
        console.log(res.tempFilePath)
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) { 
            wx.showToast({
              title: '保存成功,请在相册中查看',
            })
          }
        })
      }
    })
  }
})

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

聊聊 AI 平台存储方案和选型

最近火爆全网的 ChatGPT 再次带来一股 AI 热潮。 过去的五年,AI 快速发展并应用到很多领域中。作为一家存储企业,我们也感受到了 AI 行业的活力,和我们交流团队中,AI 企业越来越多,有自动驾驶、蛋白质结构预测、量化投…

【HTML】【消失的花木兰】花木兰:三兔蹦迪走,安能辨我是兔子?

前言 (改编)  某日,参军后的花木兰刚回到家乡,却不料遇上抓拿自己的官兵… 因此,花木兰变成兔子躲了起来,你能否找到躲起来的花木兰呢?一起来拭目以待… 一、游戏名称与游戏规则&#xff08…

joinquant量化数据精准吗?

在股票量化投资中,joinquant量化数据起到很大的作用,因为joinquant量化平台的数据能够从众多只股票数据中,能够一一罗列出来,也就是说,joinquant量化数据可以在计算和分析数据模型中,能够帮助投资者找到他们…

【SpringBoot1】创建第一个SpringBoot项目

创建SpringBoot项目可以通过两种方式: 1、通过访问:https://start.spring.io/,SpringBoot的官方网站进行创建SpringBoot项目; 2、通过工具(例如:Idea)创建SpringBoot项目。本次使用IDEA创建第一…

数据结构进阶 红黑树

作者:小萌新 专栏:数据结构进阶 作者简介:大二学生 希望能和大家一起进步! 本篇博客简介:介绍高阶数据结构: 红黑树 红黑树红黑树的概念红黑树的性质红黑树节点的定义红黑树的插入情况一情况二情况三红黑树的验证红黑…

远程监控网络摄像头通用指南

一、引言 随着物联网技术的发展,越来越多的场景需要我们通过技术手段去感知。画面和声音相当于机器的眼睛和耳朵,有了这些实时数据我们可以做很多事情,比如车牌识别、人脸识别、体温识别等等。本文将全方位介绍网络摄像头如何接入软件的实现…

2022.12 青少年机器人技术等级考试理论综合试卷(四级)

2022年12月 青少年机器人技术等级考试理论综合试卷(四级) 分数: 100 题数: 30 一、 单选题(共 20 题, 共 80 分) 1.以下关于 Arduino C 语言的说法, 正确的是?( ) A.setup() 函数和…

SpringMVC Interceptor拦截器

SpringMVC中的拦截器用于拦截控制器方法的执行,执行在Controller前后,和视图渲染完成后。如下图所示: 一、创建拦截器 继承HandlerInterceptor 接口,并实现其中的方法 public class FirstInterceptor implements HandlerInter…

儿子小伟刚刚再婚,大衣哥就河南新乡商演,这是给孙子攒奶粉钱吗

现如今的社会,因为人们的攀比心理,结一次婚能让人脱一层皮,尤其是农村赚钱难,结婚花钱就更难了。其实不只是普通老百姓,强如农民歌唱家大衣哥这样的人,也架不住儿子一而再,再而三的结婚。 大衣哥…

Qt基础之二十一:QtRO(Qt Remote Object)实现进程间通信

这里将QtRO单独从上一篇Qt基础之二十:进程间通信拎出来,因为它是Qt5.9以后新加入的模块,专门用于进程间通信。其使用步骤有点类似之前介绍过的RPC(Remote Procedure Call)框架:gRPC和thrift,关于这两个框架详见 Qt中调用thrift和Qt中调用gRPC QtRO基于Socket封装,不仅支…

小程序开发——模板与配置

一、WXML 模板语法 1.数据绑定的基本原则 ① 在 data 中定义数据 ② 在 WXML 中使用数据2.在 data 中定义页面的数据 在页面对应的 .js 文件中,把数据定义到 data 对象中即可:3. Mustache 语法的格式 把data中的数据绑定到页面中渲染,使用…

【测试】java+selenium环境搭建

努力经营当下,直至未来明朗! 文章目录一、下载安装谷歌浏览器二、下载谷歌驱动三、常见问题&解决方法1. SessionNotCreatedException2. The version of ChromeDriver only support xxxxxxxxx3. The path to the driver executable the path to普通小…

5-2输入/输出管理-I/O核心子系统

文章目录一.I/O调度二.设备保护三.SPOOLing技术(假脱机技术)四.设备的分配与回收1.设备分配时应该考虑的因素2.静态分配和动态分配3.设备分配管理中的数据结构(1)设备控制表DCT(Device Control Table)&…

MySQL进阶篇之Linux安装MySQL8.0.26

Linux安装MySQL 需要更多安装MySQL的教程,请查阅Linux学习笔记——MySQL数据库管理系统安装部署 1、MySQL下载地址:https://downloads.mysql.com/archives/community/ 2、在FinalShell中输入rz,然后选择下载好的MySQL安装包,进行上…

【数据质量】一起聊聊数据质量

Garbage In, Garbage Out ​ 数据质量关注的是数据的健康,数据健康和人的健康很相似,人的健康会影响人的生活品质,同样数据的健康会影响数据的使用品质。为了保证我们健康,我们需要养成良好的生活习惯,膳食平衡&#x…

Open3D DBSCAN聚类(Python版本)

文章目录 一、简介二、算法步骤三、实现代码四、实现效果参考资料一、简介 DBSCAN算法,全称为“Density-Based Spatial Clustering of Applications with Node”,也就是“基于密度的聚类”。此类算法是假设聚类结构能通过样本分布的紧密程度确定,从样本密度的角度来考察样本…

亿发浅析:财务一体化功能与管理流程

在信息时代的背景下,企业信息化已成为中小企业降低成本、提高效率、提高竞争力的重要手段,也是中小企业实现长期可持续发展的有效途径。 信息化对企业管理的好处是显而易见的,如加快信息流,提高信息资源利用率,促进企业…

STM32使用FSMC驱动LCD

关于FSMC驱动LCD的函数LCD_WR_REG的理解首先你需要理解使用结构体LCD_BASE若有错误,请各位师兄师姐指点原理框图重要的函数理解关于LCD_BASE和函数LCD_WR_REG(u16 regval)的理解至于0X6C00 0802地址也是一样的。首先要说的是这是我个人的理解…

数字IC设计、验证、FPGA笔试必会 - Verilog经典习题 (五)位拆分与运算

数字IC设计、验证、FPGA笔试必会 - Verilog经典习题 (五)位拆分与运算 🔈声明: 😃博主主页:王_嘻嘻的CSDN博客 🧨未经作者允许,禁止转载 🔑系列专栏:牛客Veri…

Burp Suite Professional 2023.1 (macOS, Linux, Windows) - Web 应用安全、测试和扫描

Burp Suite Professional, Test, find, and exploit vulnerabilities. 请访问原文链接:https://sysin.org/blog/burp-suite-pro-2023,查看最新版。原创作品,转载请保留出处。 作者主页:www.sysin.org Burp Suite Professional&a…