微信小程序获取图片网页链接转换为 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

相关推荐

  • 基于 Spring Boot 框架实现微信支付接口调用及回调功能

    实现微信支付接口调用及回调功能,以下是完整的步骤及代码实现,基于 Spring Boot 框架。 1. 微信支付开发准备 开通微信支付 配置 API 安全密钥 前往商户平台的【账户设置】-【API安全】中配置 API 密钥。 2. 集成依赖 在 Spring Boot 项目中添加 HTTP 客户端依赖,例如 RestTemplate 或 OkHttp。也可用…

    2024年11月23日
    00
  • 使用 VS Code 管理 Git 仓库详细使用指南

    使用 VS Code 管理 Git 仓库,可以通过其直观的图形界面和终端功能完成常见的版本控制操作,如克隆、提交、分支管理等。以下是一个详细的使用指南,帮助你高效地使用 VS Code 和 Git。 1. 环境准备安装必要工具安装 Git:从 Git 官网 下载并安装。安装 VS Code:从 VS Code 官网 下载并安装。安装 Git 插件(可选):在…

    2024年11月30日
    00
  • 在 Jupyter Notebook 中使用 Markdown 的相关技巧

    在 Jupyter Notebook 中使用 Markdown 是一种常见的方式来撰写文档和注释,增强数据分析和报告的可读性。Markdown 在 Jupyter Notebook 中不仅支持标准的文本格式化功能,还提供了许多扩展功能,比如数学公式、表格、代码块等。以下是一些常用的 Markdown 技巧,可以帮助你提升 Jupyter Notebook 中…

    2024年11月27日
    00
  • 使用 HBuilderX 开发 uni-app 项目通过以下步骤实现微信小程序中获取用户头像、昵称、授权登录以及用户手机号

    在使用 HBuilderX 开发 uni-app 项目时,可以通过以下步骤实现微信小程序中获取用户头像、昵称、授权登录以及用户手机号。 1. 配置微信小程序的权限 在微信小程序后台中,确保已经启用了相关的功能模块,如: 同时在 app.json 中配置授权弹窗的提示: 2. 授权获取用户头像、昵称 从微信小程序 2.10.4 版本开始,推荐使用 wx.get…

    2024年12月11日
    00
  • 实现“鼠标点击器外挂”,模拟快速点击或者自动化点击的工具

    实现一个“鼠标点击器外挂”,通常是指模拟快速点击或者自动化点击的工具。以下是一个实现的基本思路和代码示例,适合用于演示或学习目的。 功能描述自动模拟鼠标点击(单击或双击)。用户可以设置点击间隔和总点击次数。提供启动和停止按钮,方便控制。 示例实现HTML CSS (style.css) JavaScript (script.js) 功能实现说明用户输入:用户…

    2024年11月30日
    00
  • 微信小程序开发中使用 Tailwind CSS 提高开发效率和代码的可维护性

    Tailwind CSS 是一个利用原子化 CSS 类来构建用户界面的框架,在微信小程序开发中使用 Tailwind CSS 可以提高开发效率和代码的可维护性。以下是在微信小程序中使用 Tailwind CSS 进行原子 CSS 开发的具体步骤: 安装 Tailwind CSS 配置 Tailwind CSS 引入样式:在微信小程序的全局样式文件app.wx…

    2024年12月15日
    00
  • 浏览器跨域请求中携带 Cookie需要同时在前端和后端进行配置

    浏览器跨域请求中,要让请求携带 Cookie,需要同时在前端和后端进行配置。以下是实现的方法: 前端配置 在前端代码中使用 fetch 或 Axios 发起请求时,需要设置 credentials 属性: 1. Fetch 示例 2. Axios 示例 后端配置 在后端需要允许跨域请求,并确保 Cookie 能够正常传递。 1. 设置 Access-Cont…

    2024年12月9日
    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
  • 搭建一个基于 Node.js 和 MySQL 的微信小程序

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

    2024年11月24日
    00
  • uni-app 一个使用 Vue.js 开发所有前端应用的框架跨端开发的优势

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到 iOS、Android、Web(响应式)、以及各种小程序(微信 / 支付宝 / 百度 / 头条 / QQ / 钉钉)等多个平台,其跨端开发具有以下优势: 开发效率高 跨平台兼容性好 性能优化 生态丰富 学习成本低

    2024年12月22日
    00
  • Solving the Makefile Missing Separator Stop Error in VSCode ……

    在 VSCode 中处理 Makefile 的 missing separator. Stop 错误,通常是因为 Makefile 中的命令行前没有用Tab 键缩进,而使用了空格。Makefile 规定,配方(recipe)中的每个命令行必须以Tab 键开头,而不是空格。 解决方法1. 检查 Makefile 的缩进打开报错的 Makefile 文件。找到出…

    2024年12月2日
    00
  • 在微信服务号中,通过设置自动回复,可以在新用户关注时引导其进入小程序

    在微信服务号中,通过设置自动回复,可以在新用户关注时引导其进入小程序。以下是实现的方法和建议: 1. 使用文本自动回复引导在服务号后台设置关注自动回复,可以通过一段欢迎语并附带小程序链接,引导用户点击进入。示例文案: 小程序链接格式: 设置路径:进入 微信公众平台 > 自动回复 > 关注后自动回复,添加以上文案。 2. 使用卡片自动回复引导你可以直接在自动回…

    2024年12月3日
    00
  • 在Spring Boot中,利用AOP(Aspect-Oriented Programming)实现操作日志记录。

    在Spring Boot中,利用AOP(Aspect-Oriented Programming)结合自定义注解,可以优雅地实现操作日志记录。这种方式不仅解耦了业务逻辑与日志记录功能,还能让代码更简洁、可维护性更高。 以下是实现步骤: 1. 项目依赖 在Spring Boot项目中,确保以下依赖已存在(默认spring-boot-starter-aop随spr…

    2024年11月23日
    00
  • 微信小程序RequestTask.onChunkReceived 监听分块数据接收事件接口

    在微信小程序中,RequestTask.onChunkReceived 是用于监听分块数据接收事件的接口。此功能适用于需要逐步接收大数据(例如流媒体、文件分块等)的场景,可以显著提升大文件传输的性能和用户体验。 以下是详细介绍和使用方法: 1. 功能说明用途:监听通过 wx.request 或 wx.downloadFile 发起的请求过程中,每次接收到的数…

    2024年11月28日
    00
  • Android Studio 2024 版本安装 SDK、Gradle环境配置

    在 Android Studio 2024 中,配置 SDK 和 Gradle 环境是非常重要的步骤,确保开发环境能正确运行、编译和构建你的 Android 项目。以下是详细的安装和配置步骤。 1. 安装 Android Studio 2024 首先,你需要安装 Android Studio 2024。你可以从 Android Studio 官网 下载最新版…

    2024年11月23日
    00

发表回复

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

联系我们

在线咨询: QQ交谈

邮件:723923060@qq.com

关注微信