Drawing & Image

async buildAsync(): Promise<ISheetImage>

getId(): string

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const images = fWorksheet.getImages();
images.forEach((image) => {
  console.log(image, image.getId());
});

getSource(): string

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const images = fWorksheet.getImages();
images.forEach((image) => {
  console.log(image, image.toBuilder().getSource());
});

getSourceType(): ImageSourceType

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const images = fWorksheet.getImages();
images.forEach((image) => {
  console.log(image, image.toBuilder().getSourceType());
});

getType(): DrawingTypeEnum

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const images = fWorksheet.getImages();
images.forEach((image) => {
  console.log(image, image.getType());
});

setAnchorType(anchorType: SheetDrawingAnchorType): FOverGridImageBuilder

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();

// image1 position is start from A6 cell, anchor type is Position.
// Only the position of the drawing follows the cell changes. When rows or columns are inserted or deleted, the position of the drawing changes, but the size remains the same.
const image1 = await fWorksheet.newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
  .setColumn(0)
  .setRow(5)
  .setAnchorType(univerAPI.Enum.SheetDrawingAnchorType.Position)
  .buildAsync();

// image2 position is start from C6 cell, anchor type is Both.
// The size and position of the drawing follow the cell changes. When rows or columns are inserted or deleted, the size and position of the drawing change accordingly.
const image2 = await fWorksheet.newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
  .setColumn(2)
  .setRow(5)
  .setAnchorType(univerAPI.Enum.SheetDrawingAnchorType.Both)
  .buildAsync();

// image3 position is start from E6 cell, anchor type is None.
// The size and position of the drawing do not follow the cell changes. When rows or columns are inserted or deleted, the position and size of the drawing remain unchanged.
const image3 = await fWorksheet.newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
  .setColumn(4)
  .setRow(5)
  .setAnchorType(univerAPI.Enum.SheetDrawingAnchorType.None)
  .buildAsync();

// insert images into the sheet
fWorksheet.insertImages([image1, image2, image3]);

// after 2 seconds, set the row height of the 5th row to 100px and insert a row before the 5th row.
// then observe the position and size changes of the images.
setTimeout(() => {
  fWorksheet.setRowHeight(5, 100).insertRowBefore(5);
}, 2000);

setBack(): boolean

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = fWorksheet.getImages()[0];
const result = image?.setBack();
console.log(result);

setBackward(): boolean

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = fWorksheet.getImages()[0];
const result = image?.setBackward();
console.log(result);

setColumn(column: number): FOverGridImageBuilder

// create a new image builder and set image source.
// then build `ISheetImage` and insert it into the sheet, position is start from F6 cell.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = await fWorksheet.newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
  .setColumn(5)
  .setRow(5)
  .buildAsync();
fWorksheet.insertImages([image]);

setColumnOffset(offset: number): FOverGridImageBuilder

// create a new image builder and set image source.
// then build `ISheetImage` and insert it into the sheet, position is start from F6 cell and horizontal offset is 10px.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = await fWorksheet.newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
  .setColumn(5)
  .setRow(5)
  .setColumnOffset(10)
  .buildAsync();
fWorksheet.insertImages([image]);

setCrop(top?: number, left?: number, bottom?: number, right?: number): boolean

// set the crop of the image, top 10px, left 10px, bottom 10px, right 10px.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = fWorksheet.getImages()[0];
const result = image?.setCrop(10, 10, 10, 10);
console.log(result);

setCropBottom(bottom: number): FOverGridImageBuilder

// create a new image builder and set image source.
// then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, bottom crop is 10px.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = await fWorksheet.newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
  .setColumn(5)
  .setRow(5)
  .setCropBottom(10)
  .buildAsync();
fWorksheet.insertImages([image]);

setCropLeft(left: number): FOverGridImageBuilder

// create a new image builder and set image source.
// then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, left crop is 10px.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = await fWorksheet.newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
  .setColumn(5)
  .setRow(5)
  .setCropLeft(10)
  .buildAsync();
fWorksheet.insertImages([image]);

setCropRight(right: number): FOverGridImageBuilder

// create a new image builder and set image source.
// then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, right crop is 10px.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = await fWorksheet.newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
  .setColumn(5)
  .setRow(5)
  .setCropRight(10)
  .buildAsync();
fWorksheet.insertImages([image]);

setCropTop(top: number): FOverGridImageBuilder

// create a new image builder and set image source.
// then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, top crop is 10px.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = await fWorksheet.newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
  .setColumn(5)
  .setRow(5)
  .setCropTop(10)
  .buildAsync();
fWorksheet.insertImages([image]);

setForward(): boolean

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = fWorksheet.getImages()[0];
const result = image?.setForward();
console.log(result);

setFront(): boolean

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = fWorksheet.getImages()[0];
const result = image?.setFront();
console.log(result);

setHeight(height: number): FOverGridImageBuilder

// create a new image builder and set image source.
// then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, width is 120px and height is 50px.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = await fWorksheet.newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
  .setColumn(5)
  .setRow(5)
  .setWidth(120)
  .setHeight(50)
  .buildAsync();
fWorksheet.insertImages([image]);

setImage(image: ISheetImage): FOverGridImageBuilder

// create a new image builder and set initial image configuration.
// then build `ISheetImage` and insert it into the sheet, position is start from F6 cell.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = await fWorksheet.newOverGridImage()
  .setImage({
    drawingId: '123456',
    drawingType: univerAPI.Enum.DrawingType.DRAWING_IMAGE,
    imageSourceType: univerAPI.Enum.ImageSourceType.BASE64,
    source: 'https://avatars.githubusercontent.com/u/61444807?s=48&v=4',
    unitId: fWorkbook.getId(),
    subUnitId: fWorksheet.getSheetId(),
  })
  .setColumn(5)
  .setRow(5)
  .buildAsync();
fWorksheet.insertImages([image]);

async setPositionAsync(row: number, column: number, rowOffset?: number, columnOffset?: number): Promise<boolean>

setRotate(angle: number): boolean

// set 90 degrees rotation of the image
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = fWorksheet.getImages()[0];
const result = image?.setRotate(90);
console.log(result);

setRow(row: number): FOverGridImageBuilder

// create a new image builder and set image source.
// then build `ISheetImage` and insert it into the sheet, position is start from F6 cell.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = await fWorksheet.newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
  .setColumn(5)
  .setRow(5)
  .buildAsync();
fWorksheet.insertImages([image]);

setRowOffset(offset: number): FOverGridImageBuilder

// create a new image builder and set image source.
// then build `ISheetImage` and insert it into the sheet, position is start from F6 cell and vertical offset is 10px.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = await fWorksheet.newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
  .setColumn(5)
  .setRow(5)
  .setRowOffset(10)
  .buildAsync();
fWorksheet.insertImages([image]);

async setSizeAsync(width: number, height: number): Promise<boolean>

// set the image width 120px and height 50px
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = fWorksheet.getImages()[0];
const result = image?.setSizeAsync(120, 50);
console.log(result);

setSource(source: string, sourceType?: ImageSourceType): boolean

setSubUnitId(subUnitId: string): FOverGridImageBuilder

setUnitId(unitId: string): FOverGridImageBuilder

setWidth(width: number): FOverGridImageBuilder

// create a new image builder and set image source.
// then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, width is 120px and height is 50px.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = await fWorksheet.newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
  .setColumn(5)
  .setRow(5)
  .setWidth(120)
  .setHeight(50)
  .buildAsync();
fWorksheet.insertImages([image]);

remove(): boolean

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const image = fWorksheet.getImages()[0];
const result = image?.remove();
console.log(result);

toBuilder(): FOverGridImageBuilder

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const images = fWorksheet.getImages();
images.forEach((image) => {
  console.log(image, image.toBuilder().getSource());
});