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

相关推荐

  • 理解 HTML、HTML5 和 “H5” 区别的重要性

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

    2024年12月2日
    00
  • 在 Ant Design ProTable 中,如何设置不分页,依然显示分页信息,前端分页不触发

    在 Ant Design ProTable 中,默认情况下,分页是与数据请求(request)相关联的。也就是说,每当分页切换时,request 会被触发,重新请求新的数据。如果你希望在禁用分页的同时,依然显示分页控件,并且不触发 request 请求,可以通过以下方法进行配置。解决方案要在 Ant Design ProTable 中禁用分页的同时保留分页信…

    2024年11月29日
    00
  • 基于 Spring Boot 框架实现微信支付接口调用及回调功能

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

    2024年11月23日
    00
  • 微信小程序的 RequestTask.onChunkReceived 接口接收二进制数据流

    微信小程序的 RequestTask.onChunkReceived 接口允许接收分块的二进制数据流(如视频或音频流),但在小程序环境中,由于不支持 TextDecoder,处理这些数据时需要采用其他方法。 解析数据流的方案 模拟 TextDecoder 功能 如果需要将 ArrayBuffer 转换为字符串(如 UTF-8 编码),可以通过自定义方法模拟 …

    2024年11月26日
    00
  • 在 Vue3 和 uniapp 的 H5 环境中使用 QRCode.toDataURL() 生成二维码时无法显示的问题

    1. 图片格式或生成的 DataURL 处理问题QRCode.toDataURL() 方法通常会生成一个 Base64 编码的 PNG 图片。某些 Android 浏览器或 WebView 可能对 Base64 编码的图片支持不好,或者由于资源限制无法正常解析。解决方法:尝试通过生成二维码的图片 URL 直接展示而非使用 Base64 编码。可以通过将二维码…

    2024年11月27日
    00
  • 将 Unity 项目打包发布到微信小程序平台的方法

    将 Unity 项目打包发布到微信小程序平台需要用到 Unity 的 WeChat Mini Game SDK 和微信开发者工具。以下是详细的操作步骤: 1. 准备工作 1.1 安装工具 1.2 注册微信小程序账号 2. 项目设置 2.1 导入 SDK 2.2 配置 WebGL 设置 在 Unity 中完成 WebGL 平台配置: 2.3 添加 WeChat…

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

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

    2024年12月3日
    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
  • 加速你的开发体验给 Android Studio 配置国内镜像源

    在国内使用 Android Studio 开发时,由于网络限制,许多工具和依赖下载速度较慢,例如 SDK、Gradle 和第三方库等。为了加速开发过程,配置 国内镜像源 是一种有效的解决方案。下面是如何配置 Android Studio 使用国内镜像源加速开发体验的详细步骤。 1. 配置国内 Maven 镜像源 国内的 Maven 镜像源可以加速 Andro…

    2024年11月23日
    00
  • 微信小程序Map地图使用详细教程,获取小程序定位,绑定地图点击事件

    在微信小程序中,地图功能可以通过 Map 组件来实现,结合定位和点击事件,可以实现丰富的地图交互功能。下面将详细讲解如何使用 Map 组件,包括获取小程序定位、绑定地图点击事件等功能。 1. 在小程序中使用 Map 地图 (1) 引入 Map 组件 在小程序页面的 .wxml 文件中,使用 <map> 组件来嵌入地图。该组件支持显示地图、定位、缩…

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

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

    2024年12月3日
    00
  • 解决登录Google账号,手机上Google账号无法验证问题?

    遇到 Google账号无法验证 的问题时,通常是因为以下几个原因之一: 以下是一些解决方法: 1. 检查手机网络和信号确保手机信号和网络连接稳定,有时验证码可能由于网络问题无法及时收到。如果你使用的是 短信验证,确保手机信号良好,短信接收正常。如果使用的是 Google 提供的 Google Authenticator 应用,确保应用正常工作,并且时间同步(…

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

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

    2024年12月2日
    00
  • 微信小程序错误提示 does not have a method “onShareTimeline”

    当在微信小程序中尝试实现分享到朋友圈功能时,如果你在控制台遇到 does not have a method “onShareTimeline” 错误,这通常是由于以下原因之一: 1. 检查基础库版本 onShareTimeline 是在小程序基础库 2.11.3 及以上版本支持的。如果当前开发者工具的基础库版本较低,会导致方法无法找到。 解决方法: 2. …

    2024年11月26日
    00

发表回复

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

联系我们

在线咨询: QQ交谈

邮件:723923060@qq.com

关注微信