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

相关推荐

  • 微信小程序错误提示 does not have a method “onShareTimeline”

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

    2024年11月26日
    00
  • 使用uni-app微信小程序生成邀请码邀请好友注册

    在 uni-app 中实现微信小程序的邀请功能,可以通过生成邀请码来邀请好友注册。这个过程通常包括生成唯一的邀请码、分享链接生成二维码,以及接收邀请并使用邀请码完成注册等步骤。下面详细介绍如何在 uni-app 中实现这个功能。 1. 设计邀请码生成规则 首先,需要设计邀请码的生成规则。一般来说,邀请码是一个随机生成的字符串或者是与用户ID相关联的字符串。为…

    2024年11月23日
    00
  • 安装 Laravel 11 + Filament 详细教程

    安装Laravel 11之前选确保安装了Composer 管理器,接下来的步骤是通过Composer 包管理器安装完成的。 一、前提条件 二、使用 Composer 创建新的 Laravel 11 项目 三、在现有项目中添加 Laravel 11(如果是集成到现有项目) 请注意,在实际安装过程中,可能会遇到各种问题,如权限问题(在 Linux 下,如果没有足…

    2025年1月18日
    00
  • Python 的 json模块序列化数据从文件里读取出来或存入文件

    Python 的 json 模块用于处理 JSON 格式的数据,可以将 JSON 数据与 Python 数据结构之间相互转换。以下是具体用法,包括从文件读取 JSON 数据以及将数据写入文件: 1. 将 JSON 数据从文件中读取到 Python 数据结构 代码示例: 解析过程: 2. 将 Python 数据结构写入到文件中(序列化为 JSON) 代码示例:…

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

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

    2024年11月27日
    00
  • 在IOS中使用WebView内嵌H5页面,使用a标签点击跳转无效的问题

    在 iOS 中,使用 WebView 嵌入 H5 页面时,可能会遇到点击 <a> 标签跳转无效的问题。这个问题通常是由于 iOS WebView 的默认行为或配置导致的,特别是在使用 UIWebView 或 WKWebView 时。以下是几种解决方法,可以帮助解决这个问题。 1. 使用 WKWebView 替代 UIWebView 首先,确保你使…

    2024年11月23日
    00
  • python反爬-图像验证码与滑块验证码的跳过反selenium检测,动态ip等问题

    针对反爬措施,Python可以使用以下策略来跳过图像验证码与滑块验证码、反检测Selenium,以及通过动态IP规避限制。这是一个分步说明: 1. 图像验证码的跳过与破解1.1 图像验证码处理对于简单的图像验证码,可以使用 OCR 技术直接识别验证码内容。常用库包括:Tesseract-OCR: 一款开源 OCR 工具。Pytesseract: Tesser…

    2024年11月28日
    00
  • Android 解决 “Module was compiled with an incompatible version of Kotlin“

    “Module was compiled with an incompatible version of Kotlin” 错误通常出现在 Android 开发中,因为模块的 Kotlin 编译器版本与项目中的 Kotlin 编译器版本不匹配。以下是解决此问题的方法: 1. 检查 Kotlin 插件版本步骤:打开 Android Studio。点击顶部菜单的 …

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

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

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

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

    2024年12月15日
    00
  • 多方面的优化包括启动时间、React Native 速度提升 550% 运行时性能以及渲染效率的提升

    React Native 速度提升 550% 可能涉及多方面的优化,包括启动时间、运行时性能以及渲染效率的提升。这通常是通过框架改进、代码优化和工程实践的结合来实现的。以下是实现 React Native 性能大幅提升的一些关键方法和策略: 1. 启动时间优化 1.1 减少 JS Bundle 大小 1.2 预加载资源 1.3 使用优化的原生模块 2. 渲染…

    2024年12月7日
    00
  • Web实时通信和 @microsoft/signalr 微软开发的一款基于 SignalR 的实时通信库

    Web实时通信和 @microsoft/signalr@microsoft/signalr 是微软开发的一款基于 SignalR 的实时通信库,专为 Web 应用提供强大的实时通信功能。SignalR 的主要特点包括支持双向通信、自动选择传输协议(WebSockets、Server-Sent Events 或 Long Polling)以及简化的服务器与客户…

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

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

    2024年11月26日
    00
  • 在使用 PHP 抓取 HTTPS 资源时,会遇到一些常见问题

    在使用 PHP 抓取 HTTPS 资源时,可能会遇到一些常见问题。这些问题通常与 SSL 配置、证书验证或 PHP 设置相关。以下是常见问题及其解决方法的汇总: 1. SSL 证书验证失败问题描述当使用 file_get_contents、cURL 等方法访问 HTTPS 资源时,可能会遇到类似以下错误: 解决方法更新 cacert.pem 文件下载最新的根…

    2024年12月2日
    00
  • 把一个矩形div变成一个直角三角形

    要将一个矩形 div 变成一个直角三角形,可以通过 CSS 的一些属性进行实现。具体的方法是利用 border 属性来隐藏矩形的部分,留下一个直角三角形的形状。以下是实现的步骤:CSS 方法: 解释:width 和 height 设置为 0:通过将 div 的宽度和高度设置为 0,实际上把矩形的主体部分隐藏了。border-left 和 border-bot…

    2024年11月27日
    00

发表回复

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

联系我们

在线咨询: QQ交谈

邮件:723923060@qq.com

关注微信