Not able to correctly form image from image data [ Adobe UXP environment ]

[vishesh-rocketium]

I am reading PSD like this :

   import { readPsd , initializeCanvas } from "ag-psd"; 
    
    initializeCanvas(
      (width, height) => {
        throw new Error("Canvas not supported in this environment");
      },
      undefined,
      (width, height) => ({
        width,
        height,
        data: new Uint8ClampedArray(width * height * 4), // Allocate memory for ImageData
        colorSpace: "srgb", // Use sRGB color space
      })
    );
    
     const psd1 = readPsd(psdBuffer, {
          useRawThumbnail: true,
          useImageData: true,
        });

now I tried to upload image to s3 . ImageBytes is unit8Array , ( const imageBytes = new Uint8Array(obj.src); ) [obj.src contains unit8clampedArray]

   const imageUrl = `${ENV.S3_API_BASE_URL}/${key}`;

  const blob = new Blob([imageBytes], { type: "image/png" });
  const uploadResponse = await fetch(uploadURL, {
    method: "PUT",
    headers: {
      "Content-Type": "image/png",
    },
    body: blob,
  });

  if (!uploadResponse.ok) {
    throw new Error(`Upload failed: ${uploadResponse.statusText}`);
  }

I am getting empty output after uploading . Any Idea what might be the issue , or how to solve this ?

[Agamnentzar]

Image data is raw bitmap color data, not an encoded PNG image. You need to encode it yourself.

[vishesh-rocketium]

Yep , worked now . Thanks again for always replying so fast .