如何在纯JavaScript中获取<img>标签本地图片的Buffer数据？

我来给你捋清楚怎么用纯JS实现这个需求——核心就是把图片的二进制数据取出来，再包装成你需要的Buffer格式，步骤很清晰：

第一步：给图片加个标识 #

先给你的<img>标签加个id，这样我们在JS里能方便地定位到它：

<img id="localImage" alt="abc" src="./images/abc.png" />

第二步：编写点击事件逻辑 #

接下来写JavaScript代码，绑定点击事件并处理图片的二进制数据：

// 获取页面上的目标图片元素
const targetImg = document.getElementById('localImage');

// 给图片绑定点击事件
targetImg.addEventListener('click', async () => {
  try {
    // 用Fetch API请求图片资源（和img加载图片用的是同一个路径）
    const imgResponse = await fetch(targetImg.src);
    if (!imgResponse.ok) {
      throw new Error(`图片请求失败，状态码：${imgResponse.status}`);
    }

    // 将响应转换成ArrayBuffer（原始二进制数据容器）
    const arrayBuffer = await imgResponse.arrayBuffer();
    // 转成Uint8Array——这和Node.js里的Buffer本质是一样的字节数组
    const byteArray = new Uint8Array(arrayBuffer);

    // 如果你需要模拟你给出的那种Buffer格式（带长度和数组内容）
    const customBuffer = {
      length: byteArray.length,
      data: Array.from(byteArray)
    };

    // 输出你要的格式，比如示例的(23234)[234,345,786]
    console.log(`(${customBuffer.length})[${customBuffer.data.join(',')}]`);
    // 也可以直接返回byteArray，它本身就具备Buffer的核心特性
    return byteArray;
  } catch (err) {
    console.error('获取图片Buffer出错啦：', err);
  }
});

关键要点说明 #

• Fetch API的作用：它能帮我们拿到图片的二进制原始数据，只要浏览器能加载这张图片，Fetch就能请求到它
• Uint8Array和Buffer的关系：浏览器里没有Node.js那种原生的Buffer对象，但Uint8Array是标准的字节数组，和Buffer功能几乎一致；如果需要完全匹配你示例的格式，就像代码里那样包装成带length和data的对象就行
• 跨域小提示：如果直接用file://打开本地HTML，有些浏览器会限制Fetch访问本地文件，这时候用个简单的本地服务器（比如npx http-server）启动页面就没问题了

内容的提问来源于stack exchange，提问作者Maanas Hegde