当前位置：首页 > news >正文

uniapp：小程序将base64图片字符串保存到手机相册

news 来源：原创 2025/8/30 1:58:31

一、需求分析

用户提供的是Base64格式的图片数据，而小程序保存图片到本地通常需要的是临时文件路径。

第一步可能需要将Base64数据转换成临时文件，然后再保存到手机相册。

第二步查阅UniApp的文档，关于保存图片到相册的相关API，uni.saveImageToPhotosAlbum。这个API的参数需要一个文件路径，需要先将Base64转换成临时文件路径。另外，Base64数据通常以"data:image/png;base64,"开头，这部分在转换时需要去掉，只保留编码部分。

第三步在UniApp中，可以使用uni.getFileSystemManager()的writeFile方法，将Base64数据写入临时路径。不过要注意，Base64数据需要转换成ArrayBuffer，需要用到uni.base64ToArrayBuffer方法。

二、解决方案

去除 Base64 头部信息
提取纯数据部分，确保正确解码。
转换为 ArrayBuffer
使用 UniApp 提供的 base64ToArrayBuffer 方法转换数据。
写入临时文件
将数据写入小程序的临时目录，生成临时文件路径。
保存到相册
调用 uni.saveImageToPhotosAlbum 并处理权限和结果。

三、示例

效果图

图1

图2

testSaveBase64ToPhotoAlbum.vue代码

<template><view><button class="btn" @click="handleSaveImage()">保存到相册</button></view>
</template>
<script>
export default {data(){return {base64Img:""}},onLoad(options){// this.base64Img = this.getBase64Image();},methods: {saveBase64ToPhotoAlbum(base64Data) {// 1. 去除Base64头部信息（如："data:image/png;base64,"）const base64 = base64Data.replace(/^data:image\/\w+;base64,/, '');// 2. 转换为ArrayBufferconst arrayBuffer = uni.base64ToArrayBuffer(base64);// 3. 生成临时文件路径const filePath = `${wx.env.USER_DATA_PATH}/temp_${Date.now()}.png`;// 4. 写入文件const fs = uni.getFileSystemManager();return new Promise((resolve, reject) => {fs.writeFile({filePath,data: arrayBuffer,encoding: 'binary',success: () => {// 5. 保存到相册uni.saveImageToPhotosAlbum({filePath,success: () => resolve('保存成功'),fail: (err) => reject('保存失败，请检查权限：' + err.errMsg),});},fail: (err) => reject('文件写入失败：' + err.errMsg),});});},// 调用示例async handleSaveImage() {try {// 示例Base64数据，实际替换为你的数据const base64 = this.getBase64Image();await this.saveBase64ToPhotoAlbum(base64);uni.showToast({ title: '保存成功', icon: 'success' });console.error("保存图片成功");} catch (error) {console.error("保存图片失败 error：", error);uni.showToast({ title: error, icon: 'none' });// 处理权限被拒绝的情况if (error.includes('authorize')) {uni.openSetting({}); // 引导用户打开权限设置}}},getBase64Image(){return "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoK";// 替换完整的Base64图片字符串}}
}
</script><style scoped>.btn {width: 100px;background-color: blue;border-radius: 16px;color: white;font-size: medium;font-weight: bold;text-align: center;padding: 0 0 0 0;margin: 26px;}
</style>

四、注意事项

用户触发
保存操作必须由用户主动触发（如点击按钮），否则 iOS 可能拦截。
权限处理
首次调用会弹窗请求权限。
若用户拒绝，捕获错误并引导前往设置开启：
uni.openSetting({});
文件格式
根据 Base64 的 MIME 类型（如 image/png）动态设置文件后缀，确保系统正确识别。
临时路径
使用 wx.env.USER_DATA_PATH 获取小程序文件系统根目录，避免路径问题。
性能优化
大图片转换可能耗时，建议添加加载提示：

加载提示

uni.showLoading({ title: '保存中...' });
// 保存完成后
uni.hideLoading();

uniapp：小程序将base64图片字符串保存到手机相册

一、需求分析用户提供的是Base64格式的图片数据，而小程序保存图片到本地通常需要的是临时文件路径。第一步可能需要将Base64数据转换成临时文件，然后再保存到手机相册。第二步查阅UniApp的文档，关于保存图片到相册的相关API，…...

编程日记 2025/8/30 1:58:31

宇树科技再落一子！天羿科技落地深圳，加速机器人创世纪

2025年3月5日，机器人行业龙头宇树科技（Unitree）在深圳再添新动作——全资子公司深圳天羿科技有限公司正式成立。这家注册资本10万元、法定代表人周昌慧的新公司，聚焦智能机器人研发与销售，标志着宇树科技在华南市场的战…...

编程日记 2025/8/30 6:04:25

个推助力小米米家全场景智能生活体验再升级

当AI如同水电煤一般融入日常，万物互联的图景正从想象照进现实。作为智能家居领域的领跑者，小米米家凭借开放的生态战略，已连接了超8.6亿台设备，构建起全球领先的消费级AIoT平台。如今，小米米家携手个推，通过…...

编程日记 2025/8/29 6:21:48

四款GIS工具箱软件解析：满足企业多样化空间数据需求

概述随着地理信息系统（GIS）在城市规划、环境监测、资源管理等领域的广泛应用，各种GIS工具箱软件不断涌现，为用户提供了强大的数据处理、空间分析和地图制图功能。本文将为大家介绍4款GIS工具箱软件，这些软件各具特色…...

编程日记 2025/8/29 11:28:25

Deepseek×ComfyUI革命性工作流：AI图像3倍速精修实战指南

一、为什么选择深度优化的AI精修方案（H2） 核心关键词：AI图像优化工作流、ComfyUI加速方案、Deepseek节点配置 ▸ 传统Stable Diffusion耗时痛点分析（渲染时间/显存占用） ▸ 深度神经网络的并行计算优势对比&#xff…...

编程日记 2025/8/28 15:52:44

IntelliJ IDEA 2024.3.4 版本无法正常加载maven项目

报错如下： Possible solutions: - Check that Maven settings.xml does not contain http repositories - Check that Maven pom files do not contain http repository http://192.168.22.76:9003/repository/thirdparty/ - Check that Maven pom files do not co…...

编程日记 2025/8/29 18:25:18

为什么过滤器需要一个 Wrapper 来 extends HttpServletRequestWrapper

为什么过滤器需要一个 Wrapper 来 extends HttpServletRequestWrapper 1. HttpServletRequest 不可直接修改2. 能够修改请求参数和请求体3. 方便扩展与重用4. 处理请求参数和请求体5. 避免对原始请求做修改典型使用场景举个例子总结在 Java Web 开发中，过滤器&…...

编程日记 2025/8/29 11:29:46

SpaCy处理NLP的详细工作原理及工作原理框图

spaCy处理NLP的详细工作原理及工作原理框图 spaCy处理NLP的详细工作原理 spaCy是一个基于Python的开源自然语言处理（NLP）库，它提供了一系列高效且易用的工具，用于执行各种NLP任务，如文本预处理、文本解析、命名实体识…...

编程日记 2025/8/30 3:28:40

数学软件Matlab下载｜支持Win+Mac网盘资源分享

如大家所了解的，Matlab与Maple、Mathematica并称为三大数学软件。Matlab应用广泛，常被用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理、量化金融与风险管理、机器人，控制系统等领域。 Matlab将数值分析、矩阵计算、科学…...

编程日记 2025/8/29 17:50:18

OCPP与ISO 15118集成：实现即插即充与车网互动（V2G）- 慧知开源充电桩平台

OCPP与ISO 15118集成：实现即插即充与车网互动（V2G） 引言随着电动汽车（EV）与电网双向能量交互（V2G）技术的成熟，OCPP协议与ISO 15118标准的协同成为智能充电基础设施的核心挑战。本文…...

编程日记 2025/8/28 5:37:23

【C++设计模式】第七篇：桥接模式（Bridge）

注意：复现代码时，确保 VS2022 使用 C17/20 标准以支持现代特性。抽象与实现的解耦之道 1. 模式定义与用途核心思想桥接模式：将抽象部分与实现部分分离，使二者可以独立变化。关键用途： 1.拆分复杂继承…...

编程日记 2025/8/30 0:36:09

【SA8155】AIS Camera流程简述

目录 1 AIS Camera流程之初始化 2 AIS Camera流程之opencamera 3 AIS Camera流程之request处理流程高通QNX车载系统 + LA虚拟机下Camera框图如下：高通车载系统中，如上述框图所述，模组驱动在QNX侧，Android侧需要通过HAB Socket通信获取相机的数据。ais_v4l2_proxy将获取…...

编程日记 2025/8/29 21:28:31

容器 /dev/shm 泄漏学习

容器 /dev/shm 泄漏的介绍在容器环境中，/dev/shm 是一个基于 tmpfs 的共享内存文件系统，通常用于进程间通信（IPC）和临时数据存储。由于其内存特性，/dev/shm 的大小是有限的，默认情况下 Docker 容器的 /de…...

编程日记 2025/8/29 20:51:49

【Deepseek基础】--3.版本对比

目录 1.Deepseek-v1：起步与编码强劲 2. DeepSeek-V2：性能提升与开源生态 3.DeepSeek-V2.5系列：数学与网络搜索突破 4.DeepSeek-R1-Lite系列：推理模型预览版上线 5. DeepSeek-V3系列：大规模模型与推理速度提升 6…...

编程日记 2025/8/29 17:37:36

一周学会Flask3 Python Web开发-WTForms表单验证

锋哥原创的Flask3 Python Web开发 Flask3视频教程： 2025版 Flask3 Python web开发视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 我们可以通过WTForms表单类属性的validators属性来实现表单验证。常用的WTForms验证器验证器说明DataRequired(messageNo…...

编程日记 2025/8/29 18:25:28

算法题笔记（自用）——Python

目录一. 进制&位运算&ASCAII 二. format格式化输出 1. 基本用法 2. 位置参数 3. 格式化数字 4. 对齐和填充 5. 格式化二进制、八进制、十六进制 6. 格式化百分比 7. 格式化科学计数法 8. 格式化字符串字面量（f-string） 三. 字符串使…...

编程日记 2025/8/30 3:48:19

Fiji图像处理

文章目录一、Fiji —— 基于 imageJ 的免费且开源的图像处理软件1.1、工具安装（免费）1.2、源码下载（免费） 二、功能详解2.0、Fiji - ImageJ（Web应用程序）2.1、常用功能（汇总）2.2、F…...

编程日记 2025/8/27 21:07:44

【数据结构】堆和priority_queue

堆的定义堆是什么？实际上堆是一种特殊的（受限制的）完全二叉树，它在完全二叉树的基础上要求每一个节点都要大于等于或者小于等于它的子树的所有节点。这个大于小于体现在节点的值或者权重。如图所示： 根节点大于等于…...

编程日记 2025/8/29 10:39:52

Vue的简单入门三

目录侦听器 watch 注意表单输入绑定 v-model v-model修饰符编辑 lazy number Trim 模板引用组件组成组件引用三步走组件的嵌套关系 header Main Aside Aritice Item App.vue组件引入三个子组件组件的注册方式全局注册组件的方法 (1) Vue 2 语…...

编程日记 2025/8/28 20:35:28

kotlin的val声明的变量是常量吗

kotlin的val声明的变量是常量吗 DeepSeek R1 思考 65 秒思考过程嗯，用户问的是Kotlin中的val声明的变量是不是常量。首先我需要回忆一下Kotlin的基础知识。记得在Kotlin里，val用来声明只读变量，也就是说一旦赋值之后就不能再重新赋值了。…...

编程日记 2025/8/29 3:54:27

C# | 委托 | 事件 | 异步

委托（Delegate）和事件（Event） 在C#和C中，委托（Delegate）与事件（Event）以及函数对象（Function Object）是实现回调机制或传递行为的重要工具。虽然…...

编程日记 2025/8/29 16:08:47

算法日记33：14届蓝桥C++B冶炼金属（二分答案）

一、题目： 二、题解： 1、思路解析： 1）首先我们可以发现题目的样例数量为（ n < 1000 n<1000 n<1000），因此我们可以考虑 O ( n ∗ l o g n ) O(n*log^n) O(n∗logn)时间复杂度的算法 …...

编程日记 2025/8/29 8:53:42

【YOLO V5】目标检测 WSL2 AutoDL VScode SSH

【YOLO V5】目标检测 WSL2 AutoDL VScode SSH 前言整体思路理解向YOLO 目标检测完整流程环境配置Anaconda 获取 YOLO 代码与预训练模型下载 YOLOv5 代码和预训练模型配置 YOLOV5 工程环境解压 YOLOv5 源代码并添加预训练模型调整依赖版本选择对应的 Python 解释器数据集准备…...

编程日记 2025/8/29 18:37:40

前端基础之ajax

vue-cli配置代理服务器解决跨域问题我们可以使用一个代理服务器8080，Vue项目8080发送请求向代理服务器8080发送请求，再由在理服务器转发给后端服务器首先需要在vue.config.js中配置代理服务器 const { defineConfig } require(vue/cli-service) modul…...

编程日记 2025/8/30 6:31:20

vscode离线配置远程服务器

目录一、前提二、方法 2.1 查看vscode的commit_id 2.2 下载linux服务器安装包 2.3 安装包上传到远程服务器，并进行文件解压缩三、常见错误 Failed to set up socket for dynamic port forward to remote port（vscode报错解决方法）-C…...

编程日记 2025/8/30 3:25:48

C语言——string.h下的特殊库函数

string.h下的特殊函数 strtok(分割字符串）strerror(错误码信息）memcpy(拷贝）memmove(拷贝）memset(设置内存）memcmp(比较大小） strtok(分割字符串） char * strtok ( char * str, const char * s…...

编程日记 2025/8/29 18:52:10

烟花燃放安全管控：智能分析网关V4烟火检测技术保障安全

一、方案背景在中国诸多传统节日的缤纷画卷中，烟花盛放、烧纸祭祀承载着人们的深厚情感。一方面，烟花璀璨，是对节日欢庆氛围的热烈烘托，寄托着大家对美好生活的向往与期许；另一方面，袅袅青烟、点点烛光&a…...

编程日记 2025/8/28 9:13:16

【一个月备战蓝桥算法】递归与递推

字典序在刷题和计算机科学领域，字典序（Lexicographical order）也称为词典序、字典顺序、字母序，是一种对序列元素进行排序的方式，它模仿了字典中单词的排序规则。下面从不同的数据类型来详细解释字典序： …...

编程日记 2025/8/26 2:38:47

二、Java-封装playwright UI自动化(根据官网执行步骤，首先封装BrowserFactory枚举类及BrowserManager)

前言查看playwright官网，api文档了解到，playwright的基本步骤： 1、实例化一个playwright 2、启动一个浏览器类型 3、打开一个页面所以，在封装时需要有一个浏览器工厂类，定义不同的浏览器类型，在配置文…...

编程日记 2025/8/27 13:00:10

java项目之基于ssm的在线视频网站开发（源码+文档）

项目简介基于ssm的在线视频网站开发实现了以下功能： 该系统的目标用户包括管理员，用户。管理员上传视频，管理视频，查看视频留言，回复视频留言，管理视频收藏信息，管理公告，管理用户…...

编程日记 2025/8/29 16:46:21

观察者模式的C++实现示例

核心思想观察者模式是一种行为型设计模式，定义了对象之间的一对多依赖关系。当一个对象（称为Subject，主题）的状态发生改变时，所有依赖于它的对象（称为Observer，观察者）都会自动收到…...

编程日记 2025/8/28 1:56:43

c语言中的主要知识点

一、基础语法与结构程序结构包含顺序结构、选择结构（if/switch）、循环结构（for/while/do-while）。程序必须包含且仅有一个main函数作为入口。数据类型与变量基本类型：整型（int、long）、浮…...

编程日记 2025/8/29 12:03:51

Pytorch构建LeNet进行MNIST识别 #自用

LeNet是一种经典的卷积神经网络（CNN）结构，由Yann LeCun等人在1998年提出，主要用于手写数字识别（如MNIST数据集）。作为最早的实用化卷积神经网络，LeNet为现代深度学习模型奠定了基础，…...

编程日记 2025/8/29 19:32:40

docker：Dockerfile案例之自定义centos7镜像

1 案例需求自定义centos7镜像。要求： 默认登录路径为 /usr可以使用vim 2 实施步骤编写dockerfile脚本 vim centos_dockerfile 内容如下： #定义父镜像 FROM centos:7#定义作者信息 MAINTAINER handsome <handsomehandsome.com># 设置阿里云…...

编程日记 2025/8/30 5:25:21

post get 给后端传参数

post 方式一 ： data: params 作为请求体（Request Body）传递： 你已经展示了这种方式，通过data字段直接传递一个对象或数组。这种方式通常用于传递复杂的数据结构。dowmfrom: function (params) { return request({ u…...

编程日记 2025/8/27 8:16:34

Linux 系统不同分类的操作命令区别

Linux 系统有多种发行版，每种发行版都有其独特的操作命令和工具。以下是一些常见的分类及其操作命令的区别： 1. 基于 Red Hat 的发行版 (RHEL, CentOS, Fedora) 1.1 包管理安装软件包： bash复制 sudo yum install <package> 更新软件包： bash复制 sudo yum update…...

编程日记 2025/8/28 9:29:07

Checkpoint 模型与Stable Diffusion XL（SDXL）模型的区别

Checkpoint 模型与 Stable Diffusion XL（SDXL）模型在功能、架构和应用场景上有显著区别，以下是主要差异的总结： 1. 基础架构与定位 Checkpoint 模型是基于 Stable Diffusion 官方基础模型（如 SD 1.4/1.5）…...

编程日记 2025/8/29 18:45:22

软件工程与实践（第4版新形态）练习与实践1

软件工程与实践（第4版新形态） 练习与实践1 1.填空题 (1)程序，文档 (2)系统软件，支撑软件，应用软件 (3)系统方法 (4)软件开发和维护 (5)工程的概念、原理、技术和方法 (6)实现软件的优质高产 (7)软件开发技术和…...

编程日记 2025/8/28 16:44:05

探秘基带算法：从原理到5G时代的通信变革【九】QPSK调制/解调

文章目录 2.8 QPSK 调制 / 解调简介QPSK 发射机的实现与原理QPSK 接收机的实现与原理QPSK 性能仿真QPSK 变体分析本博客为系列博客，主要讲解各基带算法的原理与应用，包括：viterbi解码、Turbo编解码、Polar编解码、CORDIC算法、CRC校验、FFT/…...

编程日记 2025/8/30 0:43:58

侯捷 C++ 课程学习笔记：深入理解智能指针

文章目录每日一句正能量一、引言二、智能指针的核心概念（一）std::unique_ptr（二）std::shared_ptr（三）std::weak_ptr 三、学习心得四、实际应用案例五、总结每日一句正能量如果说幸福是一个悖论&#xff…...

编程日记 2025/8/30 3:42:01

基于Qwen-VL的手机智能体开发

先上Demo： vl_agent_demo 代码如下： 0 设置工作目录： 你的工作目录需要如下： 其中utils文件夹和qwenvl_agent.py均参考自 GitHub - QwenLM/Qwen2.5-VL: Qwen2.5-VL is the multimodal large language model series developed by …...

编程日记 2025/8/29 12:09:35

系统盘还原成正常U盘

选择格式化,等格式化完毕就完了点击还原设备的默认值格式化就完了...

编程日记 2025/8/16 12:10:49

Leetcode 103: 二叉树的锯齿形层序遍历

Leetcode 103: 二叉树的锯齿形层序遍历问题描述： 给定一个二叉树，返回其节点值的锯齿形层序遍历（即第一层从左到右，第二层从右到左，第三层从左到右，依此类推）。适合面试的解法：广…...

编程日记 2025/8/29 11:29:50

FastGPT 引申：基于 Python 版本实现 Java 版本 RRF

文章目录 FastGPT 引申：基于 Python 版本实现 Java 版本 RRF函数定义使用示例 FastGPT 引申：基于 Python 版本实现 Java 版本 RRF 函数定义使用 Java 实现 RRF 相关的两个函数：合并结果、过滤结果 import java.util.*;// 搜索结果类型定义…...

编程日记 2025/8/29 21:32:24

C++中的无锁编程

引言在当今多核处理器普及的时代，并发编程已成为高性能应用程序开发的关键技术。传统的基于锁的同步机制虽然使用简单，但往往会带来性能瓶颈和死锁风险。无锁编程（Lock-Free Programming）作为一种先进的并发编程范式&#xff0c…...

编程日记 2025/8/28 7:45:17

【全栈开发】---- 一文掌握 Websocket 原理，并用 Django 框架实现

目录介绍底层原理握手环节详解： 收发数据（加密） Django 中配置 channels 1、注册 channels 2、在 settings.py 中添加 asgi_application 3、修改 asgi.py 文件 4、routing 5、consumers 实现聊天室介绍 WebSocket是一种先进的通信协议&…...

编程日记 2025/8/28 14:04:36

游戏引擎学习第135天

仓库:https://gitee.com/mrxiao_com/2d_game_3 回顾 game_asset.cpp 的创建在开发过程中，不使用任何现成的游戏引擎或第三方库，而是直接基于 Windows 进行开发，因为 Windows 目前仍然是游戏的标准平台，因此首先在这个环境中进行…...

编程日记 2025/8/16 12:03:39

国内支持Stable Diffusion模型的平台

国内支持Stable Diffusion模型的平台截至2025年3月，国内支持SD模型的平台主要包括以下六类，覆盖不同用户需求和技术层级： 一、模型分享与下载平台 Liblib.ai 描述：国内最大SD原创模型社区，提供海量基础模型、Lora…...

编程日记 2025/8/29 15:09:46

扣子（Coze）：重构AI时代的工作流革命

文章目录扣子（Coze）：重构AI时代的工作流革命使用Coze：一、工作流的本质：从单点智能到系统智能二、扣子工作流的技术基因三、场景化实践：从知识库到智能员工四、未来图景：AI Agent的进化之路结语…...

编程日记 2025/8/28 19:09:44

alloc、malloc 与 allocator：内存管理三剑客

内存管理是C语言开发者的核心能力，也是系统级编程的基石。一、内存分配三剑客：malloc/calloc/realloc 1. malloc函数原理 int* arr (int*)malloc(5 * sizeof(int)); // 分配20字节空间（假设int为4字节） 从堆区分配指定字节的连…...

编程日记 2025/8/29 3:45:04

一、需求分析

二、解决方案

三、示例

四、注意事项

相关文章：