FImage

The facade class for a slide image element.

Access

Access through:

Inheritance

Extends FPageElement. Its inherited members are available on this object.

Setup

Register @univerjs-pro/slides or a preset that includes it. In plugin mode, import @univerjs-pro/slides/facade. Additional methods below require their listed plugin packages. See Facade setup.

`@univerjs-pro/slides`

`FImage.getSource`

Get the image source.

TypeScript

getSource(): string

Returns

The image source.

Examples

TypeScript

const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const images = fSlide.getImages()console.log(images[0]?.getSource())

Package: @univerjs-pro/slides · Type definitions

`FImage.setClipShape`

Set the preset shape used to clip the image.

TypeScript

setClipShape(prstGeom: ShapeTypeEnum, adjustValues?: Record<string, number>): this

Parameters

prstGeom — Required. The preset shape type.
adjustValues — Optional. Optional adjust values for the clip shape.

Returns

This image, for chaining.

Examples

TypeScript

const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const image = fSlide.getImages()[0]if (image) {  image.setClipShape(univerAPI.Enum.ShapeTypeEnum.RoundRect, { adj1: 5000 })}

Types: ShapeTypeEnum · Record

Package: @univerjs-pro/slides · Type definitions

`FImage.setCrop`

Set the crop rectangle of the image.

TypeScript

setCrop(crop: ISlideImageElement['crop']): this

Parameters

crop — Required. The crop rectangle.

Returns

This image, for chaining.

Examples

TypeScript

const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const image = fSlide.getImages()[0]if (image) {  image.setCrop({    left: 10,    top: 10,    right: 10,    bottom: 10,  })}

Types: ISlideImageElement

Package: @univerjs-pro/slides · Type definitions

`FImage.setShapeData`

Set shape-style data for the image frame, such as picture border.

TypeScript

setShapeData(shapeData: ISlideImageElement['shapeData']): this

Parameters

shapeData — Required. Shape-style data reused from the shape model.

Returns

This image, for chaining.

Examples

TypeScript

const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const image = fSlide.getImages()[0]if (image) {  image.setShapeData({    stroke: {      color: '#FF0000',      width: 2,      lineStrokeType: univerAPI.Enum.ShapeLineTypeEnum.SolidLine,    },  })}

Types: ISlideImageElement

Package: @univerjs-pro/slides · Type definitions

`FImage.setSource`

Update the image source.

TypeScript

setSource(source: string, imageSourceType?: ImageSourceType): this

Parameters

source — Required. The image URL, base64 data URI, or image id.
imageSourceType — Optional. The image source type.

Returns

This image, for chaining.

Examples

TypeScript

const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const image = fSlide.getImages()[0]if (image) {  image.setSource('https://example.com/image.png', univerAPI.Enum.ImageSourceType.URL)}

Types: ImageSourceType

Package: @univerjs-pro/slides · Type definitions

`FImage.toBuilder`

Returns a builder initialized from this image. The builder does not update the slide until it is passed to fSlide.updateImage().

TypeScript

toBuilder(): FImageBuilder

Returns

An image builder.

Examples

TypeScript

const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const image = fSlide.getImages()[0]if (image) {  const imageInfo = image.toBuilder().setSize(480, 300).build()  fSlide.updateImage(imageInfo)}

Types: FImageBuilder

Package: @univerjs-pro/slides · Type definitions

How is this guide?