如何在Office Scripts中加载网络PNG图片的像素数据？

你下载得到的Uint8Array长度远小于预期的原因很简单：PNG是压缩格式，你拿到的是压缩后的二进制文件数据，不是直接展开的RGBA像素数组。要获取逐像素的RGBA数据，需要先对PNG进行解码。

由于Office Scripts环境不支持常规浏览器的canvas.getContext('2d').getImageData()直接操作，但可以通过以下步骤实现解码：

实现步骤 #

1. 将下载的二进制数据转换为Blob，生成可访问的临时URL
2. 用HTMLImageElement加载图片资源
3. 使用OffscreenCanvas绘制图片并提取像素数据

完整代码示例 #

async function downloadAndDecodeImage(workbook: ExcelScript.Workbook) {
    const url = "你的图片URL";
    
    // 1. 下载图片二进制数据并转为Blob
    const res = await fetch(url);
    const blob = await res.blob();
    const imageUrl = URL.createObjectURL(blob);
    
    // 2. 加载图片到HTMLImageElement
    const img = new Image();
    await new Promise((resolve, reject) => {
        img.onload = resolve;
        img.onerror = reject;
        img.src = imageUrl;
        // 处理跨域问题（需图片服务器允许跨域）
        img.crossOrigin = "anonymous";
    });
    
    // 3. 创建OffscreenCanvas并绘制图片
    const canvas = new OffscreenCanvas(img.width, img.height);
    const ctx = canvas.getContext("2d");
    if (!ctx) {
        throw new Error("无法获取Canvas上下文");
    }
    ctx.drawImage(img, 0, 0);
    
    // 4. 获取RGBA像素数据
    const imageData = ctx.getImageData(0, 0, img.width, img.height);
    const pixelData = imageData.data; // Uint8ClampedArray，长度为width*height*4
    
    // 示例：修改第一个像素为红色
    pixelData[0] = 255; // R通道
    pixelData[1] = 0;   // G通道
    pixelData[2] = 0;   // B通道
    pixelData[3] = 255; // A通道
    
    // 可选：将修改后的像素数据转成PNG Blob
    ctx.putImageData(imageData, 0, 0);
    const modifiedBlob = await canvas.convertToBlob({type: "image/png"});
    
    // 清理临时URL，避免内存泄漏
    URL.revokeObjectURL(imageUrl);
    
    return pixelData;
}

注意事项 #

• 跨域限制：如果图片所在服务器未配置CORS响应头，fetch和Image加载会失败，需确保资源允许跨域访问。
• 性能提示：你的图片尺寸（3150×2513）较大，解码和处理会占用较多内存，建议分片操作避免脚本超时。
• 资源清理：务必调用URL.revokeObjectURL释放临时URL，防止内存泄漏。

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