无ImageData环境下如何向ImageTracer提供正确图像数据？

Let's break down exactly what's going wrong here and how to fix it step by step:

Core Problem #

ImageTracer.js expects ImageData.data to be a Uint8ClampedArray containing raw RGBA pixel values (each element is an integer 0-255, ordered red → green → blue → alpha for every pixel). What you're passing right now is the raw binary data of the PNG/JPG file itself (a compressed format with headers, not uncompressed pixels), so the library can't parse actual color information—hence why it only returns the image boundary path.

Your manual arrayBuffer.length = arrayBuffer.bytesLength hack suppresses the error, but it doesn't convert the data into a format the library can interpret as pixels.

Step 1: Decode the Compressed Image File First #

The ArrayBuffer you get from reading the image file is indeed a standard ArrayBuffer, but it's the compressed PNG/JPG binary (including file headers and compressed pixel data). You need to decode this into raw RGBA pixels first.

For PNG Files #

If you're using UPNG, here's how to convert its output to a valid pixel array:

// Decode the PNG ArrayBuffer
const pngData = UPNG.decode(arrayBuffer);
// UPNG returns pixel data as Uint8Array; convert to Uint8ClampedArray
const clampedPixels = new Uint8ClampedArray(pngData.data);
// Build the correct fake ImageData object
const imageData = {
  data: clampedPixels,
  width: pngData.width,
  height: pngData.height
};
// Now pass to ImageTracer
const results = library.apply(imageData);

For JPG Files #

You'll need a JPG decoding library like libjpeg-js. Here's a quick example:

// Decode the JPG ArrayBuffer
const jpgData = decode(arrayBuffer);
// Convert the decoded Uint8Array to Uint8ClampedArray
const clampedPixels = new Uint8ClampedArray(jpgData.data);
// Build fake ImageData
const imageData = {
  data: clampedPixels,
  width: jpgData.width,
  height: jpgData.height
};
// Run ImageTracer
const results = library.apply(imageData);

Step 2: Verify the Fake ImageData Structure #

Make sure your fake ImageData matches the expected structure exactly:

• data: Must be a Uint8ClampedArray (or any array-like with a length property and integer values 0-255 in RGBA order)
• width/height: Correct pixel dimensions (not layout bounds—use the decoded image's actual width/height, not sceneNode.globalBounds)

Why Your Original Approach Failed #

When you pass the raw file's ArrayBuffer directly:

1. It doesn't contain RGBA pixel values—instead it's compressed image data with format-specific headers
2. Even after adding length, the library can't interpret the binary values as pixel colors, so it falls back to tracing the outer boundary with a solid fill

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