TypeScript非DOM环境下从URL获取imageData遇Image()未定义问题

在Node.js这类非浏览器DOM环境里，没有原生的Image()构造函数，直接套用浏览器端的Canvas API自然会报错。你可以借助canvas这个npm包模拟浏览器的Canvas环境，实现需求：

步骤1：安装依赖 #

先安装核心包及TypeScript类型定义：

npm install canvas @types/canvas

步骤2：编写TypeScript代码 #

利用canvas提供的loadImage和createCanvas方法实现功能：

import { createCanvas, loadImage } from 'canvas';

async function getImageDataFromUrl(imageUrl: string): Promise<ImageData> {
  // 加载远程或本地图片
  const image = await loadImage(imageUrl);
  
  // 创建与图片尺寸匹配的canvas
  const canvas = createCanvas(image.width, image.height);
  const ctx = canvas.getContext('2d');
  
  if (!ctx) {
    throw new Error('无法获取Canvas 2D上下文');
  }
  
  // 将图片绘制到canvas上
  ctx.drawImage(image, 0, 0);
  
  // 提取并返回ImageData
  return ctx.getImageData(0, 0, image.width, image.height);
}

// 使用示例
(async () => {
  try {
    const imageData = await getImageDataFromUrl('https://example.com/image.jpg');
    console.log('获取到的ImageData:', imageData);
  } catch (err) {
    console.error('处理失败:', err);
  }
})();

补充说明 #

• loadImage同时支持本地图片路径（如./assets/image.png）和远程URL，远程图片会自动发起HTTP请求加载
• 如果你的场景需要更高效的批量图片处理、格式转换等操作，也可以考虑sharp库，但它的API和Canvas差异较大，需要额外适配

内容的提问来源于stack exchange，提问作者Jigyasu Tanwar