feat: added exportPadding to PNG (blob) export in @excalidraw/utils (#5626)

* added exportPadding

* Update README.md

* Update CHANGELOG.md

src/packages/excalidraw/CHANGELOG.md

@@ -18,6 +18,7 @@ Please add the latest change on the top under the correct section.
 #### Features
 
 - Added support for storing [`customData`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#storing-custom-data-to-excalidraw-elements) on Excalidraw elements [#5592].
+- Added `exportPadding?: number;` to [exportToCanvas](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#exporttocanvas) and [exportToBlob](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#exporttoblob). The default value of the padding is 10.
 
 #### Breaking Changes
 

src/packages/excalidraw/README.md

@@ -929,7 +929,8 @@ This function normalizes library items elements, adding missing values when need
   elements,
   appState
   getDimensions,
-  files
+  files,
+  exportPadding?: number;
 }: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L12">ExportOpts</a>
 </pre>
 
@@ -940,6 +941,7 @@ This function normalizes library items elements, adding missing values when need
 | getDimensions | `(width: number, height: number) => { width: number, height: number, scale?: number }` | undefined | A function which returns the `width`, `height`, and optionally `scale` (defaults `1`), with which canvas is to be exported. |
 | maxWidthOrHeight | `number` | undefined | The maximum width or height of the exported image. If provided, `getDimensions` is ignored. |
 | files | [BinaryFiles](The [`BinaryFiles`](<[BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64)>) | undefined | The files added to the scene. |
+| exportPadding | number | 10 | The padding to be added on canvas |
 
 **How to use**
 
@@ -957,7 +959,8 @@ This function returns the canvas with the exported elements, appState and dimens
 exportToBlob(
   opts: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L14">ExportOpts</a> & {
   mimeType?: string,
-  quality?: number;
+  quality?: number,
+  exportPadding?: number;
 })
 </pre>
 
@@ -966,6 +969,7 @@ exportToBlob(
 | opts |  |  | This param is passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exportToCanvas) |
 | mimeType | string | "image/png" | Indicates the image format |
 | quality | number | 0.92 | A value between 0 and 1 indicating the [image quality](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#parameters). Applies only to `image/jpeg`/`image/webp` MIME types. |
+| exportPadding | number | 10 | The padding to be added on canvas |
 
 **How to use**
 

src/packages/utils.ts

@@ -35,7 +35,10 @@ export const exportToCanvas = ({
   files,
   maxWidthOrHeight,
   getDimensions,
-}: ExportOpts) => {
+  exportPadding,
+}: ExportOpts & {
+  exportPadding?: number;
+}) => {
   const { elements: restoredElements, appState: restoredAppState } = restore(
     { elements, appState },
     null,
@@ -46,7 +49,7 @@ export const exportToCanvas = ({
     getNonDeletedElements(restoredElements),
     { ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 },
     files || {},
-    { exportBackground, viewBackgroundColor },
+    { exportBackground, exportPadding, viewBackgroundColor },
     (width: number, height: number) => {
       const canvas = document.createElement("canvas");
 
@@ -87,6 +90,7 @@ export const exportToBlob = async (
   opts: ExportOpts & {
     mimeType?: string;
     quality?: number;
+    exportPadding?: number;
   },
 ): Promise<Blob> => {
   let { mimeType = MIME_TYPES.png, quality } = opts;