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

news/2024/7/10 22:46:01 标签: uni-app, 前端, es6, vue.js, javascript

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

javascript">// 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.niftyadmin.cn/n/5334192.html

相关文章

VR风景园林虚拟仿真系统编辑工具支持可视化预览成本低

为了帮助更多人快速、高效地构建虚拟现实应用系统,提高开发效率,降低成本投入,VR虚拟现实交互系统编辑器作为一种用于创建和编辑虚拟现实应用程序的工具,采用可视化界面提示和简单操作就能快速制作VR虚拟现实交互系统。 VR虚拟现实…

编译与链接(C/C++)

在C/C中关于代码的运行需要经过.c文件到.exe文件,而其中走过这些步骤这需要对原始的.c文件进行编译与链接。对于编译与链接主要构成了翻译环境,经过翻译环境之后生成.exe文件,然后在通过运行环境输出对应的结果。本篇主要讲解编译与链接。 以…

套壳实锤?Win11 改 Win10 界面,重获灵魂功能

Win11 怎么改成 Win10 经典界面呢?下面我们就一步步的教大家。 重获开始菜单 Windows 11 更新最大亮点之一,就是首次使用了「极为先进」的任务栏居中技术,这一点,可以让其他人第一眼就看出你升级了Windows 11。「田字」还在&…

CSS 实现卡片以及鼠标移入特效

CSS 实现卡片以及鼠标移入特效 文章目录 CSS 实现卡片以及鼠标移入特效0、效果预览默认鼠标移入后 1、创建卡片组件2、添加样式3、完整代码 0、效果预览 默认 鼠标移入后 在本篇博客中,我们将探讨如何使用 CSS 来实现卡片组件,并添加鼠标移入特效&#…

数学建模--论文

内容来自数学建模BOOM:【快速入门】北海:数模建模基础MATLAB入门论文写作数学模型与算法(推荐数模美赛国赛小白零基础必看教程)_哔哩哔哩_bilibili 目录 一、论文整体模版 1.整体框架 2.示例 二、标题 1.标题主题事项 三、摘要 1.摘要三要素&am…

leetcode-杨辉三角ii

119. 杨辉三角 II 题解: 首先,我们需要创建一个列表来存储杨辉三角的每一行。然后,我们需要计算每一行的元素。每一行的每个元素都是上一行的两个相邻元素的和。第一个和最后一个元素总是1。最后,我们返回第rowIndex行。 class…

【Kafka】Kafka介绍、架构和概念

目录 Kafka介绍Kafka优势Kafka应用场景Kafka基本架构和概念ProducerConsumer/Consumer GroupBrokerZooKeeperTopicPartitionReplicasOffsetsegment Kafka介绍 Kafka是是一个优秀的分布式消息中间件,关于常用的消息中间件对比可参考文章:消息中间件概述。…

基于光口的以太网 udp 回环实验

文章目录 前言一、系统框架整体设计二、系统工程及 IP 创建三、接口讲解四、顶层模块设计五、下载验证前言 本章实验我们通过网络调试助手发送数据给 FPGA,FPGA通过光口接收数据并将数据使用 UDP 协议发送给电脑。 提示:任何文章不要过度深思!万事万物都经不起审视,因为世上…