微信小程序获取图片网页链接转换为 base64 ,wx.arrayBufferToBase64(binary) 提示已弃用的处理方法

微信小程序wx.arrayBufferToBase64 提示已弃用的问题,可以通过其他方式实现将图片网页链接转换为 Base64 文件。以下是几种替代方法和完整的实现方案。

1. 问题分析
wx.arrayBufferToBase64 在较新版本的小程序中可能会提示已弃用,建议开发者使用 JavaScript 原生方式处理。
如果目标是将网络图片转换为 Base64,可以使用 ArrayBufferUint8Array 配合 btoa() 函数。

2. 替代方案
2.1 使用原生 JavaScript 方法
通过 Uint8ArrayArrayBuffer 转换为 Base64。
实现步骤
使用 wx.downloadFile 下载图片。
将图片内容转换为 ArrayBuffer
使用自定义的 arrayBufferToBase64 方法实现转换。
代码实现

// 自定义 ArrayBuffer 转 Base64 函数
function arrayBufferToBase64(buffer) {
  let binary = '';
  const bytes = new Uint8Array(buffer);
  const len = bytes.byteLength;
  for (let i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return btoa(binary); // btoa: Base64 编码
}

// 示例:将网络图片转换为 Base64
function imageToBase64(url) {
  return new Promise((resolve, reject) => {
    wx.downloadFile({
      url: url,
      success(res) {
        if (res.statusCode === 200) {
          wx.getFileSystemManager().readFile({
            filePath: res.tempFilePath, // 下载的临时文件路径
            encoding: 'binary', // 以二进制读取文件
            success: (readRes) => {
              const base64 = `data:image/jpeg;base64,${arrayBufferToBase64(readRes.data)}`;
              resolve(base64);
            },
            fail: (err) => reject(err)
          });
        } else {
          reject(new Error('下载图片失败'));
        }
      },
      fail: (err) => reject(err)
    });
  });
}

// 使用示例
imageToBase64('https://example.com/image.jpg')
  .then((base64) => {
    console.log('Base64:', base64);
  })
  .catch((err) => {
    console.error('转换失败:', err);
  });

2.2 使用 wx.getFileSystemManager
直接读取下载的图片文件为 Base64,无需 ArrayBuffer 转换。
代码实现

function imageToBase64(url) {
  return new Promise((resolve, reject) => {
    wx.downloadFile({
      url: url,
      success(res) {
        if (res.statusCode === 200) {
          wx.getFileSystemManager().readFile({
            filePath: res.tempFilePath,
            encoding: 'base64', // 指定 Base64 直接读取
            success: (readRes) => {
              const base64 = `data:image/jpeg;base64,${readRes.data}`;
              resolve(base64);
            },
            fail: (err) => reject(err)
          });
        } else {
          reject(new Error('下载图片失败'));
        }
      },
      fail: (err) => reject(err)
    });
  });
}

// 使用示例
imageToBase64('https://example.com/image.jpg')
  .then((base64) => {
    console.log('Base64:', base64);
  })
  .catch((err) => {
    console.error('转换失败:', err);
  });

优势
更加直接,避免了手动处理 ArrayBuffer
微信支持直接读取为 Base64,无需额外编码步骤。

3. 注意事项
图片格式
在拼接 Base64 字符串时,请根据图片格式修改 MIME 类型。例如:JPEG:data:image/jpeg;base64,
PNG:data:image/png;base64,
GIF:data:image/gif;base64,
跨域问题
如果图片地址是跨域资源,可能需要后端代理或者确保服务器支持 CORS。
性能优化
Base64 转换后的数据较大,占用更多的存储和带宽,不建议频繁转换和存储大量图片。
如果只用于前端显示,优先考虑使用临时路径或 CDN 地址。
微信小程序权限
确保用户授权了下载文件相关权限。
临时文件路径可能有生命周期限制,需及时清理无用文件。

通过以上方法,可以高效替代 wx.arrayBufferToBase64 并实现图片链接到 Base64 的转换。推荐使用第二种方法(wx.getFileSystemManager),更简洁且符合微信小程序的最佳实践。

发布者:myrgd,转载请注明出处:https://www.object-c.cn/4893

Like (0)
Previous 2024年11月28日 下午7:33
Next 2024年11月28日 下午8:10

相关推荐

  • Redis中如何使用lua脚本redis与lua的相互调用方法

    在 Redis 中,Lua 脚本 提供了一种强大的方式来执行原子操作,可以在 Redis 服务器上直接执行 Lua 代码,从而避免了多次网络往返和保证操作的原子性。Redis 内置了对 Lua 脚本的支持,通过 EVAL 命令来执行脚本,EVALSHA 则用于执行已经加载到 Redis 服务器的脚本。1. Redis 与 Lua 脚本的基本交互1.1 基本的…

    2024年11月28日
    00
  • 在 WPF 中使用 Vlc.DotNet 和 LibVLCSharp.WPF 两种库来进行 VLC 的二次开发

    在 WPF 中使用 Vlc.DotNet 和 LibVLCSharp.WPF 两种库来进行 VLC 的二次开发,可以实现丰富的视频播放功能,比如播放本地视频、流媒体、控制播放、获取视频信息等功能。以下是对两者的介绍及开发步骤。 一、Vlc.DotNet 和 LibVLCSharp 的对比 特性 Vlc.DotNet LibVLCSharp.WPF 开发活跃度…

    2024年12月3日
    00
  • uni-app 中的一个 API,uni.getLocation用于获取用户的地理位置信息

    uni.getLocation 是 uni-app 中的一个 API,用于获取用户的地理位置信息。它可以通过 GPS 或网络方式获取当前位置,并提供包括经纬度、速度、精度等信息。这个 API 在移动端(如安卓、iOS)和 H5 平台上均可使用。基本语法 参数说明type(可选):指定位置的坐标类型。支持 ‘wgs84’ 和 ‘gcj02’,默认值为 ‘wgs…

    2024年11月28日
    00
  • Flutter 在 PC 端多窗口支持方面的进展备受关注的功能,已在 Ubuntu/Canonical 展示

    Flutter 在 PC 端多窗口支持方面的进展是一个备受关注的功能,它的目标是进一步提升 Flutter 的跨平台能力。最近,Flutter 团队与 Canonical 合作,在 Ubuntu 平台上展示了多窗口功能的新成果。这一进展对开发者和终端用户来说都有重要意义,以下是相关细节分析: 展示细节多窗口功能亮相Flutter 的多窗口支持在 Ubuntu…

    2024年12月2日
    00
  • 使用 Flutter 实现酷炫的粒子动画,可以通过 Shader 来提升效果

    使用 Flutter 实现酷炫的粒子动画,可以通过 Shader 来提升效果。这种方法结合 Flutter 的强大绘图功能和 GLSL 的灵活性,可以创造出高性能且自定义程度极高的视觉效果。以下是实现的基本步骤和核心代码: 核心思想使用 Flutter 的 CustomPainter 绘制粒子。通过 FragmentProgram (GLSL Shader)…

    2024年12月2日
    00
  • 理解 HTML、HTML5 和 “H5” 区别的重要性

    HTML & HTML5 & H5 的区别在构建现代网页时,理解 HTML、HTML5 和 “H5” 的区别是非常重要的。以下是它们的概念和主要区别: 1. HTML(超文本标记语言)定义HTML 是 HyperText Markup Language 的缩写,即超文本标记语言,用于定义网页内容的结构和含义。特性提供基…

    2024年12月2日
    00
  • 使用 Webpack 5 优化构建减少生成文件的体积提升前端性能

    在使用 Webpack 5 时,优化构建以减少生成文件的体积是提升前端性能的重要一步。以下是一些常见的优化方法和策略: 1. 开启生产模式 确保构建时使用生产模式,Webpack 会自动应用多种优化(如代码压缩、Tree Shaking 等): 或在配置文件中明确设置: 2. 启用 Tree Shaking Tree Shaking 是 Webpack 内置…

    2024年12月3日
    00
  • 小程序支持哪种类型的二维码 / 小程序识别GS1码

    二维码(Quick Response Code,快速响应码)是一种能够存储和传递信息的二维条形码,由黑白矩阵构成,能够在短时间内快速扫描并获取编码信息。二维码广泛应用于支付、商品追溯、信息传递等多个领域。下面是关于二维码的几个方面的详细解析,包括如何理解二维码、如何生成二维码、小程序支持的二维码类型、以及小程序如何识别 GS1 码。 1. 理解二维码 二维码…

    2024年11月23日
    00
  • 解决 Vue 3 应用部署到 GitHub Pages 后,遇到 404 错误问题

    在将 Vue 3 应用部署到 GitHub Pages 后,遇到 404 错误通常是由于 GitHub Pages 处理路由时的问题。Vue 3 使用 Vue Router 来管理前端路由,而 GitHub Pages 本身是静态托管服务,不支持处理 SPA(单页面应用)的客户端路由。因此,当你直接访问某个页面 URL(比如 https://youruser…

    2024年11月29日
    00
  • 2024年最新的 Node.js 安装与环境配置教程

    以下是2024年最新的 Node.js 安装与环境配置教程,适用于 Windows、macOS 和 Linux 系统。 一、什么是 Node.js? Node.js 是一个基于 V8 引擎的 JavaScript 运行环境,主要用于开发服务端应用程序。它的特点是异步事件驱动和非阻塞 I/O,适合高性能应用。 二、Node.js 安装 1. 下载 Node.j…

    2024年11月23日
    00
  • 微信小程序设计和实现一个校园音乐应用的方法

    基于微信小程序设计和实现一个校园音乐平台,主要包括以下几个方面的设计与功能实现: 1. 需求分析 1.1 功能需求 1.2 非功能需求 2. 技术架构设计 2.1 前端:微信小程序 2.2 后端 2.3 技术栈 3. 数据库设计 表结构示例: 4. 功能实现 4.1 用户登录与注册 4.2 音乐播放 4.3 歌单与榜单 4.4 评论功能 5. 部署与优化 5…

    2024年11月26日
    00
  • 部署 Harbor 时,如果运行 install 脚本报错可能导致问题的

    在部署 Harbor 时,如果运行 install 脚本报错,可能是网络问题导致的。以下是排查网络问题的方法: 1. 检查网络连通性 测试目标网络的连通性: 检查 DNS 配置: 如果解析失败,检查 /etc/resolv.conf 中的 DNS 配置,或者尝试手动指定公共 DNS,如 Google 的 8.8.8.8 或阿里云的 223.5.5.5。 2.…

    2024年12月9日
    00
  • uniapp基于vue3,element plus组件库以及axios通讯开发

    在 uniapp 前端开发中,使用 Vue3、Element Plus 组件库和 Axios 进行通讯是一种常见的组合。下面是一个简单的步骤和实践指南,帮助你更好地使用这些工具进行开发。1. 安装和配置 Vue3 和 Element Plus首先,确保你已经安装了 uniapp 项目,并且设置好相关依赖。在项目中,安装 Element Plus 组件库以便在…

    2024年11月27日
    00
  • 在 React Native 0.72.5 中使用 Hermes 引擎时JavaScript 的 Function.prototype.toString() 转成字符串

    在 React Native 0.72.5 中,使用 Hermes 引擎时,JavaScript 的 Function.prototype.toString() 方法的行为可能与其他 JavaScript 引擎(如 V8 或 JavaScriptCore)有所不同。这种差异源于 Hermes 的设计,旨在提升性能和减少内存开销。 问题描述 在 Hermes …

    2024年12月7日
    00
  • 搭建一个基于 Node.js 和 MySQL 的微信小程序

    搭建一个基于 Node.js 和 MySQL 的微信小程序后台可以帮助你管理数据、处理请求、存储用户信息等。下面是如何从头开始搭建一个基本的微信小程序后台系统的详细步骤。 1. 环境准备 确保你已经安装以下开发工具: 2. 创建 Node.js 项目 首先,创建一个新的 Node.js 项目: 2. 安装必要的依赖包: 使用以下命令安装这些依赖: 配置 My…

    2024年11月24日
    00

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们

在线咨询: QQ交谈

邮件:723923060@qq.com

关注微信