uniapp 将图片保存在本地(app端和h5端)

代码2023-02-28104 人已阅来源:网络

用uniapp框架写项目,遇到将图片保存在本地的需求,下面简单记录一下如何实现,图片格式为base64,可直接复制使用

app端:

saveBase64Img(base64) {
	const bitmap = new plus.nativeObj.Bitmap('test');
	bitmap.loadBase64Data(
		base64,
		function () {
			const url = '_doc/' + new Date() + '.png'; // url建议用时间戳命名方式
			console.log('url:', url);
			bitmap.save(
				url, {
				overwrite: true // 是否覆盖
				// quality: 'quality'  // 图片清晰度
			},
				i => {
					uni.saveImageToPhotosAlbum({
						filePath: url,
						success: function () {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							})
							bitmap.clear();
						}
					});
				},
				e => {
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
					console.log(e);
					bitmap.clear();
				}
			);
		},
		e => {
			console.log('保存失败', e);
			bitmap.clear();
		}
	);
},

h5端:(不支持saveImageToPhotosAlbum方法)

saveImg(url) {
	var oA = document.createElement("a");
	oA.download = ''; // 设置下载的文件名,默认是'下载'
	oA.href = url;
	document.body.appendChild(oA);
	oA.click();
	oA.remove(); // 下载之后把创建的元素删除
},