I thought it would be nice to have an example that would allow users to experiment with the results depending on the option when exporting. Rather than creating a new example, I added a feature to an existing example because it was appropriate.

Change type

• feature

Test plan

1. Open the export-canvas-as-image example.
2. Use the new control panel to adjust background, darkmode, padding, scale, and box arguments.
3. Verify the exported image reflects the selected options.

• Unit tests
• End to end tests

Release notes

• Added a new feature to the export-canvas-as-image example to allow configuring export options like background, dark mode, padding, scale, and crop box.

• It is possible to open and close. It was placed so as not to affect the existing layout and drawing as much as possible.
• It can set opts: background, darkmode, padding, scale and Box's arg(x,y,w,h).
  • Background and darkmode are checkbox.
  • Padding, scale, box's arg are number input.
• Control component is implemented simply for DX.
• ⚠️ I haven't implemented preserveAspectRatio yet. I will implement it if necessary.
• ⚠️ If x, y, w, and h are only partially undefined in the box, no processing was performed. I thought it would be a good idea to check the results.