Export Shapes as Image

SpreadJS enables exporting various shapes, such as Basic, Connector, Custom, Camera, Sparkline, and Text Box shapes as image sources. SpreadJS also allows you to export form control shapes as images. However, in case of a ListBox control, only the area presently scrolled to is exported, whereas the areas in dropdown cannot be exported in comboBox controls.

After inserting the shape or shape base object, you can get the image source by using the shape.toImageSrc() API.

Using Code

The following code sample depicts how to save the shape object on spreadsheet as an image source.

 // Add a shape.
 var donutShape = sheet.shapes.add('autoShape', GC.Spread.Sheets.Shapes.AutoShapeType.donut, 100, 50, 150, 150);

 // Get the shape as an image source.
 let shapeImageSrc = sheet.shapes.all()[0].toImageSrc();

For some shapes, different settings will result in varying sizes of the exported shape images. For example, if the line width for the connector shapes is different, then the size of the exported image may differ depending on the line width.

Here, both of these shapes have the same length. But, since the line widths vary, the size of the exported image is also different.

Using Designer

Spread Designer also provides a Save as Picture option when you select a shape, which saves the selected shape as an image.

Following are the steps to save a shape as an image:

1. Open a worksheet.

2. Insert a shape, as per your requirement.

3. Right-click on the shape and then click Save as Picture.

   
   

   
   

   
   

4. Select the location where you would like to save the image.

5. Name the file and click Save.

Notes:

• Currently, the exported file format is PNG, and the file name is the default object name. For example, chord 1.

• If multiple shape objects are selected, they will be exported together and all of them will be exported as a file named SpreadShapes by default.