uniapp踩坑之项目:canvas第一次保存是空白图片

news2025/2/25 11:25:44

 在ctx.draw()回调生成图片,参考canvasToTempFilePath接口文档

// data
imgFilePath: null,// 缓存二维码图片canvas路径

//js
// 首先在draw()里进行本地存储
......
ctx.draw(false, () = >{
	uni.canvasToTempFilePath({ // 把画布转化成临时文件
		quality: 1,
		// 图片质量
		canvasId: 'shareCanvas',
		// 画布ID
		success: (res) = >{
			// uni.showToast({
			//  icon: 'success',
			//  mask: true,
			//  title: '绘制完成',
			// });
			this.imgFilePath = res.tempFilePath;
			//console.log(this.imgFilePath, 'this.imgFilePath');
			uni.setStorageSync('filePath', this.imgFilePath) //保存临时文件路径到缓存
		},
		fail: function(res) {
			// console.log(res);
		}
	})
})

// 然后保存图片按钮进行取值
// 保存图片到本地,下面保存到手机
async savePic() {
	// console.log(this.imgFilePath, 'this.imgFilePathsavePic')
	let res = await uni.canvasToTempFilePath({ // 把画布转化成临时文件
		quality: 1,
		// 图片质量
		canvasId: 'shareCanvas',
	}) // 画布ID
	let storageImgFilePath = uni.getStorageSync('filePath')
	// console.log(storageImgFilePath,'storageImgFilePath');
	setTimeout(() = >{
		uni.saveImageToPhotosAlbum({ // 存成图片至手机
			filePath: storageImgFilePath,
			success: (res2) = >{
				uni.showToast({
					title: '图片保存成功',
					duration: 2000
				})
			},

			............
		})
	},
	1000)

上一篇文章,

vue3+elementPlus:el-drawer新增修改弹窗复用_element plus drawer onclick outside 嵌套弹窗-CSDN博客文章浏览阅读854次,点赞5次,收藏6次。vue3+elementPlus:el-drawer新增修改弹窗复用。在el-drawer的属性里设置:title属性,和重置函数。_element plus drawer onclick outside 嵌套弹窗https://blog.csdn.net/weixin_43928112/article/details/135237566

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

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

相关文章

算法练习-反转一个单链表(思路+流程图+代码)

难度参考 难度:简单 分类:链表 难度与分类由我所参与的培训课程提供,但需要注意的是,难度与分类仅供参考。以下内容均为个人笔记,旨在督促自己认真学习。 题目 反转一个单链表(不带头节点) …

hub汉语有轮毂的意思吗?

问题描述:hub汉语有轮毂的意思吗? 问题解答: 是的,"hub"(中文翻译为"轮毂")是指机械装置中的一个中心部分,通常用于连接或支持其他部分。在车辆的轮胎系统中,…

STC8H8K蓝牙智能巡线小车——1. 环境搭建(基于RTX51操作系统)

1. 基本介绍 开发环境准备:Keil uVision5 烧录软件:STC-ISP(V6.92A) 芯片: STC8H8K64U-45I-LQFP64 芯片引脚: 2.创建项目 打开Keil,点击【Project】,选择【new uVersion proje…

C语言——大头记单词

归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍 收藏⭐ 留言​📝 每一发奋努力的背后,必有加…

【​电力电子在电力系统中的应用​】6 滞环电流控制的PWM整流器 + STATCOM整流器 + APF仿真

【仅供参考】 【2023.06西南交大电力电子在电力系统中的应用】 目录 步骤一:基于滞环电流控制的PWM整流器仿真 1.1 仿真要求 1.2 仿真电路原理及设计 1.2.1 主电路的搭建 1.2.2 控制电路的搭建 1.3 波形分析 步骤二:从PWM整流器到STATCOM仿真 2…

ARM day5、day6 硬件编程

一、硬件 fs4412 sd卡 串口线 电源 二、根据原理图点灯 1、确定需求: 点灯(亮 or 灭) 2、查看原理图 2.1 外设原理图 devboard 查找LED2->CHG_COK(核心板) 2.2 核心板原理图 coreboard 查找CHG_COK->XEINT23/KP_ROW7/ALV_DBG…

Redis分布式锁存在的问题以及解决方式

☆* o(≧▽≦)o *☆嗨~我是小奥🍹 📄📄📄个人博客:小奥的博客 📄📄📄CSDN:个人CSDN 📙📙📙Github:传送门 📅&a…

ROS---传感器集成

ROS—传感器集成 对于ROS机器人,如果想让其启动,我们需要逐一启动底盘控制与激光雷达,操作有点冗余。并且如果只是简单启动这些节点,那么在在 rviz 中显示时,会发现出现了TF转换异常,比如参考坐标系设置为o…

如何设置Windows 11的WSL系统用作备用桌面环境

如何设置Windows 11的WSL系统用作开发环境(含Astrill设置) 如何设置Windows 11的WSL系统用作备用桌面环境 引子: 2023年末,公司突然遭遇网络攻击,调整了防火墙设置,连接VPN用来飞X软件,与原来…

JAVA基础----String类型的简单介绍

文章目录 1. String类的重要性2. 常用方法2.1 字符串构造2.2 String对象的比较2.3 字符串查找2.4 转化2.5 字符串替换2.6 字符串拆分2.7 字符串截取2.8 其他操作方法2.9 字符串的不可变性2.10 字符串修改2.11 借助StringBuffer 和 StringBuilder 观察String进行修改的效率 3. S…

实时语音多实例实现设计方案(服务端)

1.端上接入协议 如何自行开发代码访问阿里语音服务_智能语音交互(ISI)-阿里云帮助中心 2.接口修改结果逻辑及端上调用步骤 阿里client server交互流程图: 阿里语音接收识别结果: begin_time time 含义 客户端循环发送语音数据,持续接收…

vue学习,使用provide/inject通信

提示&#xff1a;组件的provide&#xff0c;可以被其内所有层级的组件&#xff0c;通过inject引用 文章目录 前言一、通信组件二、效果三、参考文档总结 前言 需求&#xff1a;使用provide/inject通信 一、通信组件 1、AA.vue <template><div class"test"…

【开发实践】前端jQuery+gif图片实现载入界面

一、需求分析 载入界面&#xff08;Loading screen&#xff09;是指在计算机程序或电子游戏中&#xff0c;当用户启动应用程序或切换到新的场景时&#xff0c;显示在屏幕上的过渡界面。它的主要作用是向用户传达程序正在加载或准备就绪的信息&#xff0c;以及提供一种视觉上的反…

腾讯云2核2G4M云服务器值得买吗?

随着云计算技术的不断发展和普及&#xff0c;越来越多的企业和个人开始意识到云服务器的优势&#xff0c;并选择将其业务迁移至云端。作为国内领先的云计算服务提供商&#xff0c;腾讯云一直致力于为用户提供高品质的云服务器服务。其中&#xff0c;腾讯云2核2G4M云服务器备受关…

Docker 安装 MySQ

Docker 安装 MySQL MySQL 是世界上最受欢迎的开源数据库。凭借其可靠性、易用性和性能&#xff0c;MySQL 已成为 Web 应用程序的数据库优先选择。 1、查看可用的 MySQL 版本 访问 MySQL 镜像库地址&#xff1a;https://hub.docker.com/_/mysql?tabtags 。 可以通过 Sort b…

SpringBoot教程(十二) | SpringBoot集成JPA

SpringBoot教程(十二) | SpringBoot集成JPA 1. JPA简介 概念&#xff1a; JPA顾名思义就是Java Persistence API的意思&#xff0c;是JDK 5.0注解或XML描述对象&#xff0d;关系表的映射关系&#xff0c;并将运行期的实体对象持久化到数据库中。 优势&#xff1a; 标准化 …

Postman使用方法指南,最全面的教程

Postman使用教程 一、Postman介绍 ​ Postman是一个英语单词&#xff0c;名词&#xff0c;作名词时意为“邮递员&#xff1b;邮差”。 ​ Postman是一个接口测试工具,在做接口测试的时候,Postman相当于一个客户端,它可以模拟用户发起的各类HTTP请求,将请求数据发送至服务端,获…

【PS】PS设计图欣赏、学习、借鉴

【PS】PS设计图欣赏、学习、借鉴 bilibili萌新PS学习计划&#xff1a;PS教程全套零基础教学视频&#xff08;全套81节全新版本&#xff09;

Flink1.17 基础知识

Flink1.17 基础知识 来源&#xff1a;B站尚硅谷 目录 Flink1.17 基础知识Flink 概述Flink 是什么Flink特点Flink vs SparkStreamingFlink的应用场景Flink分层API Flink快速上手创建项目WordCount代码编写批处理流处理 Flink部署集群角色部署模式会话模式&#xff08;Session …

conda install命令无法安装pytorch

由于网络问题&#xff0c;直接采用conda install命令可能无法直接下载对应的cuda包。 方法一&#xff1a;采用pip命令替代 步骤1&#xff1a;切换pip的源为国内源&#xff1a; 若只是临时切换&#xff1a; pip install -i https://pypi.tuna.tsinghua.edu.cn/simple some-p…