# FOverGridImageBuilder

- Human documentation: [https://docs.univer.ai/reference/facade/over-grid-image-builder](https://docs.univer.ai/reference/facade/over-grid-image-builder)

- Agent Markdown: [https://docs.univer.ai/reference/facade/over-grid-image-builder.md](https://docs.univer.ai/reference/facade/over-grid-image-builder.md)

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [facade/over-grid-image-builder.mdx](https://github.com/dream-num/documentation/blob/dev/content/reference/facade/over-grid-image-builder.mdx)

---

## Access

Access through:

* [`FOverGridImage.toBuilder()`](https://docs.univer.ai/reference/facade/over-grid-image.md#tobuilder)
* [`FWorksheet.newOverGridImage()`](https://docs.univer.ai/reference/facade/worksheet.md#newovergridimage)

## Setup

Register [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) or a preset that includes it. In plugin mode, import `@univerjs/sheets-drawing/facade`. Additional methods below require their listed plugin packages. See [Facade setup](https://docs.univer.ai/guides/sheets/getting-started/facade.md).

## `@univerjs/sheets-drawing`

### `FOverGridImageBuilder.buildAsync`

```typescript
buildAsync(): Promise<ISheetImage>
```

**Types:** [`ISheetImage`](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/services/sheet-drawing.service.d.ts) · [`Promise`](https://unpkg.com/@typescript/typescript-darwin-arm64@7.0.2/lib/lib.es5.d.ts)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.getSource`

Get the source of the image

```typescript
getSource(): string
```

**Returns**

The source of the image

**Examples**

```ts
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')
const images = fWorksheet.getImages()
images.forEach((image) => {
  console.log(image, image.toBuilder().getSource())
})
```

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.getSourceType`

Get the source type of the image

```typescript
getSourceType(): ImageSourceType
```

**Returns**

The source type of the image

**Examples**

```ts
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')
const images = fWorksheet.getImages()
images.forEach((image) => {
  console.log(image, image.toBuilder().getSourceType())
})
```

**Types:** [`ImageSourceType`](https://unpkg.com/@univerjs/core@1.0.0-rc.0/lib/types/services/image-io/image-io.service.d.ts)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setAnchorType`

Set the anchor type of the image, whether the position and size change with the cell

```typescript
setAnchorType(anchorType: SheetDrawingAnchorType): FOverGridImageBuilder
```

**Parameters**

* `anchorType` — Required. The anchor type of the image

**Returns**

The `FOverGridImageBuilder` for chaining

**Examples**

```ts
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')

// 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)
```

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md) · [`SheetDrawingAnchorType`](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/services/sheet-drawing.service.d.ts)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setColumn`

Set the horizontal position of the image

```typescript
setColumn(column: number): FOverGridImageBuilder
```

**Parameters**

* `column` — Required. The column index of the image start position, start at 0

**Returns**

The `FOverGridImageBuilder` for chaining

**Examples**

```ts
// 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.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')
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])
```

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setColumnOffset`

Set the horizontal offset of the image

```typescript
setColumnOffset(offset: number): FOverGridImageBuilder
```

**Parameters**

* `offset` — Required. The column offset of the image start position, pixel unit

**Returns**

The `FOverGridImageBuilder` for chaining

**Examples**

```ts
// 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.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')
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])
```

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setCropBottom`

Set the cropping region of the image by defining the bottom edges, thereby displaying the specific part of the image you want.

```typescript
setCropBottom(bottom: number): FOverGridImageBuilder
```

**Parameters**

* `bottom` — Required. The number of pixels to crop from the bottom of the image

**Returns**

The `FOverGridImageBuilder` for chaining

**Examples**

```ts
// 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.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')
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])
```

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setCropLeft`

Set the cropping region of the image by defining the left edges, thereby displaying the specific part of the image you want.

```typescript
setCropLeft(left: number): FOverGridImageBuilder
```

**Parameters**

* `left` — Required. The number of pixels to crop from the left side of the image

**Returns**

The `FOverGridImageBuilder` for chaining

**Examples**

```ts
// 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.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')
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])
```

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setCropRight`

Set the cropping region of the image by defining the right edges, thereby displaying the specific part of the image you want.

```typescript
setCropRight(right: number): FOverGridImageBuilder
```

**Parameters**

* `right` — Required. The number of pixels to crop from the right side of the image

**Returns**

The `FOverGridImageBuilder` for chaining

**Examples**

```ts
// 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.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')
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])
```

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setCropTop`

Set the cropping region of the image by defining the top edges, thereby displaying the specific part of the image you want.

```typescript
setCropTop(top: number): FOverGridImageBuilder
```

**Parameters**

* `top` — Required. The number of pixels to crop from the top of the image

**Returns**

The `FOverGridImageBuilder` for chaining

**Examples**

```ts
// 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.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')
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])
```

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setHeight`

Set the height of the image

```typescript
setHeight(height: number): FOverGridImageBuilder
```

**Parameters**

* `height` — Required. The height of the image, pixel unit

**Returns**

The `FOverGridImageBuilder` for chaining

**Examples**

```ts
// 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.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')
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])
```

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setImage`

Set the initial image configuration for the image builder.

```typescript
setImage(image: ISheetImage): FOverGridImageBuilder
```

**Parameters**

* `image` — Required. The image configuration

**Returns**

The `FOverGridImageBuilder` for chaining

**Examples**

```ts
// 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.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')
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])
```

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md) · [`ISheetImage`](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/services/sheet-drawing.service.d.ts)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setPlacement`

Set an explicit OneCell, TwoCell, or Absolute placement for the image.

This placement takes precedence over the individual row, column, size,
and anchor type builder fields. Use bounds inference for an existing
transform; use exact markers when a caller explicitly chose cells.

```typescript
setPlacement(placement: ISheetDrawingPlacementInput): FOverGridImageBuilder
```

**Parameters**

* `placement` — Required. Exact placement or bounds with an explicit anchor type.

**Returns**

This builder.

**Examples**

```ts
const sheet = univerAPI.getActiveWorkbook().getActiveSheet()
const image = await sheet
  .newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=96&v=4')
  .setPlacement({
    kind: univerAPI.Enum.SheetDrawingAnchorType.Position,
    from: { row: 2, column: 2, rowOffset: 8, columnOffset: 8 },
    width: 240,
    height: 120,
  })
  .buildAsync()
sheet.insertImages([image])
```

Infer Position markers from model-space bounds

```ts
const sheet = univerAPI.getActiveWorkbook().getActiveSheet()
const image = await sheet
  .newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=96&v=4')
  .setPlacement({
    kind: univerAPI.Enum.SheetDrawingAnchorType.Position,
    bounds: { left: 120, top: 80, width: 240, height: 120 },
  })
  .buildAsync()
sheet.insertImages([image])
```

TwoCell

```ts
const sheet = univerAPI.getActiveWorkbook().getActiveSheet()
const image = await sheet
  .newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=96&v=4')
  .setPlacement({
    kind: univerAPI.Enum.SheetDrawingAnchorType.Both,
    from: { row: 2, column: 2, rowOffset: 8, columnOffset: 8 },
    to: { row: 8, column: 6, rowOffset: 0, columnOffset: 0 },
  })
  .buildAsync()
sheet.insertImages([image])
```

Absolute

```ts
const sheet = univerAPI.getActiveWorkbook().getActiveSheet()
const image = await sheet
  .newOverGridImage()
  .setSource('https://avatars.githubusercontent.com/u/61444807?s=96&v=4')
  .setPlacement({
    kind: univerAPI.Enum.SheetDrawingAnchorType.None,
    left: 640,
    top: 96,
    width: 240,
    height: 120,
  })
  .buildAsync()
sheet.insertImages([image])
```

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md) · [`ISheetDrawingPlacementInput`](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/services/sheet-drawing-placement.d.ts)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setRotate`

Set the rotation angle of the image

```typescript
setRotate(angle: number): FOverGridImageBuilder
```

**Parameters**

* `angle` — Required. Degree of rotation of the image, for example, 90, 180, 270, etc.

**Returns**

The `FOverGridImageBuilder` for chaining

**Examples**

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

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setRow`

Set the vertical position of the image

```typescript
setRow(row: number): FOverGridImageBuilder
```

**Parameters**

* `row` — Required. The row index of the image start position, start at 0

**Returns**

The `FOverGridImageBuilder` for chaining

**Examples**

```ts
// 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.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')
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])
```

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setRowOffset`

Set the vertical offset of the image

```typescript
setRowOffset(offset: number): FOverGridImageBuilder
```

**Parameters**

* `offset` — Required. The row offset of the image start position, pixel unit

**Returns**

The `FOverGridImageBuilder` for chaining

**Examples**

```ts
// 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.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')
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])
```

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setSource`

Set the source of the image. The source type defaults to URL.

```typescript
setSource(source: string): FOverGridImageBuilder
setSource(source: string, sourceType?: ImageSourceType): FOverGridImageBuilder
```

**Parameters**

* `source` — Required. The source of the image
* `sourceType` — Optional. The source type of the image, default is URL

**Returns**

The `FOverGridImageBuilder` for chaining

**Examples**

```ts
// 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.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')
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])
```

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md) · [`ImageSourceType`](https://unpkg.com/@univerjs/core@1.0.0-rc.0/lib/types/services/image-io/image-io.service.d.ts)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setSubUnitId`

```typescript
setSubUnitId(subUnitId: string): FOverGridImageBuilder
```

**Parameters**

* `subUnitId` — Required.

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setUnitId`

```typescript
setUnitId(unitId: string): FOverGridImageBuilder
```

**Parameters**

* `unitId` — Required.

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)

### `FOverGridImageBuilder.setWidth`

Set the width of the image

```typescript
setWidth(width: number): FOverGridImageBuilder
```

**Parameters**

* `width` — Required. The width of the image, pixel unit

**Returns**

The `FOverGridImageBuilder` for chaining

**Examples**

```ts
// 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.getSheetByName('Sheet1')
if (!fWorksheet) throw new Error('fWorksheet is not available')
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])
```

**Types:** [`FOverGridImageBuilder`](https://docs.univer.ai/reference/facade/over-grid-image-builder.md)

**Package:** [`@univerjs/sheets-drawing`](https://docs.univer.ai/reference/packages/plugins/univerjs/sheets-drawing.md) · [Type definitions](https://unpkg.com/@univerjs/sheets-drawing@1.0.0-rc.0/lib/types/facade/f-over-grid-image.d.ts)