Image export broken on components #210

Activity

1. mimshwright commented on Mar 19, 2025

   

   mimshwright

   on Mar 19, 2025

   Last edited by mimshwright

   Contributor

   More actions

   <div data-layer="Frame 98" class="Frame98" style="width: 130px; height: 118px; position: relative; background: white; overflow: hidden">
     <img data-layer="image 8" class="Image8" style="
   
   >>> width: 422px; height: 470px; left: -146px; top: -176px;
   
   position: absolute" src="https://placehold.co/422x470" />
   </div>
   

   I think it may have to do with the Clip Contents setting. this is actually a larger image that is cropped to the size of the component frame. I wonder if maybe it's getting confused about how big the image actually is and how much of it to show?

   for example, when i only select the image, you can see that it's showing a piece that is 130x118 (the size of the comonent) but the size in the HTML is 422x470 (the original size of the image). So maybe when you do exportAsync, it is exporting the cropped version but the size information is for the full image.

   
2. mimshwright commented on Mar 19, 2025

   

   mimshwright

   on Mar 19, 2025

   Contributor

   More actions

   The solution might be to get the size of the exported image and use that rather than the native size of the node.

   This is an AI generated function for getting the dimensions of a PNG file and it could be called in images.ts line 75

   const getImageDimensionsFromBytes = (
     bytes: Uint8Array,
   ): { width: number; height: number } => {
     // Check if the bytes represent a valid PNG file
     const pngSignature = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
     for (let i = 0; i < pngSignature.length; i++) {
       if (bytes[i] !== pngSignature[i]) {
         console.error("Invalid PNG file");
         return { width: -1, height: -1 };
       }
     }
   
     // The IHDR chunk starts at byte 16
     const width =
       (bytes[16] << 24) | (bytes[17] << 16) | (bytes[18] << 8) | bytes[19];
     const height =
       (bytes[20] << 24) | (bytes[21] << 16) | (bytes[22] << 8) | bytes[23];
   
     return { width, height };
   };
3. bernaferrari commented on Mar 19, 2025

   

   bernaferrari

   on Mar 19, 2025

   OwnerAuthor

   More actions

   I wonder what is different from frame to component