Repository navigation
Image export broken on components #210
Description
Activity
<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.
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 }; };
I wonder what is different from frame to component
bug.fig.zip