Closed davo closed 3 years ago
Hey @yuanqing will it help to talk about some potential solutions for this bug? I want to take a stab at the issue but I'd like your opinion about which direction seems more feasible.
First, from what I gather Figma states the limits of the createImage
method regarding image max size. They are following a common best practice for universal supported limits, in which textures using texImage2D
should not go over 4096. Source: MDN WebGL best practices.
Here are some potential scenarios:
[ ] So, in this scenario we are using the Bitmap resolution settings and the dimensions of the selected node. It might possible to calculate the final scaled-up size of the image. So, if the number goes over 4096, this might be resolved by:
A. Fixing the broken promise: An additional condition is set right before the selection check, so the promise will not try to execute createImageFromGroupAsync
.
If the condition is faulty, it sends an error message: Cannot raster selection at ${settings.resolution}. Scaled size ${estimatedSize.width, estimatedSize.height}, exceeds limit.
B. Trying to run createImageFromGroupAsync
at a smaller scale: An additional condition is set right before the selection check, but in this case the plugin will recalculate if overriding the resolution from the settings to a lesser scale will exceed the limit of 4096. If not, it will continue the promise and flag that the resolution was changed. The success message could indicate: Flattened at ${resolution}x to avoid the canvas limit
.
[ ] Ok, here is a more complex scenario, this one will require more work. After exploring the GET image endpoint and testing it with a nodes with sizes 1024 and 2048 and scaling from 1 to 4, I can confirm that the API allows to scale beyond this limit. This offers great possibilities with more complexity, of course. The response time of rastering from the API will increase proportionally as the dimensions and scales go up. Questions from this scenario:
Here are are the rasters from the the GET image endpoint.
File / Scale | 2x | 3x | 4x |
---|---|---|---|
1024 | |||
2048 |
Figma API Docs for reference:
PNG downloaded from the Endpoint
@davo
raster a node with the API, and right after insert that blob back to the canvas using the methods you created on Insert Big Image
Thanks for the detailed write-up! I quickly looked into this today and it turned out to be a small change because most of the implementation is already done in Insert Big Image – d474401
Just published a new version of the plugin to Figma. It’ll take some time to run if you have a large selection or when flattening at a high resolution
Thanks @yuanqing! I'm glad it the write-up helped in any way.
Amazed by the PR with 63 additions and 69 deletions
, and the fact that you are achieving this level of reusability between your own work 👏🏼
Figma won't raster when the scale multiplier results in widths / heights over 4096.2.