为什么从第二帧开始变得模糊呢？好像是没有了背景

[cookie-zhang]

为什么在解帧的时候第一帧还算正常，第二针开始放佛没有了背景图？为什么？
参考图：第一帧：https://us3tmp.laiye.com/_1723196469_403.gif 第二帧：https://us3tmp.laiye.com/_1723196470_6956.gif

`import { Injectable } from '@nestjs/common';
import { createCanvas, loadImage, ImageData } from '@napi-rs/canvas';
import GIFEncoder from 'gif-encoder-2';
import axios from 'axios';
import { parseGIF, decompressFrames } from 'gifuct-js';
import { uploadImg } from '../canvas/utils/upload.service';
@Injectable()
export class GifdrawService {
async getGifDraw(Params: { gifUrl: string; pngUrl: string }): Promise {
try {
// 下载 GIF 文件
const gifResponse = await axios.get(Params.gifUrl, { responseType: 'arraybuffer' });
const gifBuffer = Buffer.from(gifResponse.data, 'binary');
console.log({ gifBuffer });
// 下载 PNG 文件
const pngResponse = await axios.get(Params.pngUrl, { responseType: 'arraybuffer' });
const pngBuffer = Buffer.from(pngResponse.data, 'binary');

  // 解析 GIF 文件并获取所有帧
  const gifFrames = this.decodeGif(gifBuffer);
  console.log({ gifFrames });
  return ‘ ’;
} catch (error) {
  console.error('Failed to process the GIF and PNG images.', error);
  throw new Error('Failed to process the GIF and PNG images.');
}

}

private async decodeGif(buffer: Buffer) {
const gif = parseGIF(buffer);
const frames = decompressFrames(gif, true);
let prevDisposalType = null;
for (let i = 0; i < frames.length; i++) {
const frame = frames[i];

  // 创建 Canvas 并将帧绘制到 Canvas 上
  const canvas = createCanvas(frame.dims.width, frame.dims.height);
  const ctx = canvas.getContext('2d');
  const imageData = new ImageData(new Uint8ClampedArray(frame.patch), frame.dims.width, frame.dims.height) as any;
  ctx.putImageData(imageData, 0, 0);

  // 将 Canvas 转换为 PNG Buffer
  const frameBuffer = canvas.toBuffer('image/png');
  if (i === 0 || prevDisposalType === 2) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }
  prevDisposalType = frame.disposalType;
  // 上传并打印上传结果
  const uploadResult = await uploadImg('gif', frameBuffer);
  console.log(`Frame ${i + 1} uploaded, result:`, uploadResult);
}

return frames.map((frame) => ({
  dims: frame.dims,
  delay: frame.delay,
  patch: frame.patch,
}));

}
}
`

[PlNG]

Just to guide you on your journey with things to check, are you handling the transparent color flag, transparent color index, background color value, and frame disposal method correctly? The image data may need to be reconstructed and have its optimizations removed before you can use it the way that you are attempting to use it.