FImageBuilder
The slide image builder. It is used to create or update an image in a slide. Unlike UI insertion, this builder requires an explicit image source and does not open a file picker.
Access
Access through:
Example
const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const imageInfo = fSlide .newImage() .setSource('https://example.com/image.png', univerAPI.Enum.ImageSourceType.URL) .setAbsolutePosition(80, 120) .setSize(320, 180) .setRotation(15) .setCrop({ left: 10, top: 10, right: 10, bottom: 10, }) .setClipShape(univerAPI.Enum.ShapeTypeEnum.RoundRect, { adj1: 5000 }) .build()fSlide.insertImage(imageInfo)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
FImageBuilder.adjustValues
adjustValues: Record<string, number>Types: Record
Package: @univerjs-pro/slides · Type definitions
FImageBuilder.build
Builds the image builder info. This method does not automatically draw the image on the slide.
A new image must be inserted via fSlide.insertImage(imageInfo), and an existing image should be updated via fSlide.updateImage(imageInfo).
build(): ISlideImageBuilderInfoReturns
The image builder info.
Examples
const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const imageInfo = fSlide .newImage() .setSource('https://example.com/image.png') .setAbsolutePosition(80, 120) .setSize(320, 180) .build()fSlide.insertImage(imageInfo)Types: ISlideImageBuilderInfo
Package: @univerjs-pro/slides · Type definitions
FImageBuilder.crop
crop: ISlideImageElement['crop']Types: ISlideImageElement
Package: @univerjs-pro/slides · Type definitions
FImageBuilder.elementId
elementId: stringPackage: @univerjs-pro/slides · Type definitions
FImageBuilder.imageSourceType
imageSourceType: ImageSourceTypeTypes: ImageSourceType
Package: @univerjs-pro/slides · Type definitions
FImageBuilder.prstGeom
prstGeom: ShapeTypeEnumTypes: ShapeTypeEnum
Package: @univerjs-pro/slides · Type definitions
FImageBuilder.setAbsolutePosition
Sets the position by absolute slide coordinates.
setAbsolutePosition(left: number, top: number): thisParameters
left— Required. The x-coordinate of the image's top-left corner.top— Required. The y-coordinate of the image's top-left corner.
Returns
This builder, for chaining.
Examples
const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const imageInfo = fSlide .newImage() .setSource('https://example.com/image.png', univerAPI.Enum.ImageSourceType.URL) .setAbsolutePosition(80, 120) .build()fSlide.insertImage(imageInfo)Package: @univerjs-pro/slides · Type definitions
FImageBuilder.setClipShape
Sets the preset shape used to clip the image.
setClipShape(prstGeom?: ShapeTypeEnum, adjustValues?: Record<string, number>): thisParameters
prstGeom— Optional. The preset shape type.adjustValues— Optional. Optional adjust values for the clip shape.
Returns
This builder, for chaining.
Examples
const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const imageInfo = fSlide .newImage() .setSource('https://example.com/image.png', univerAPI.Enum.ImageSourceType.URL) .setClipShape(univerAPI.Enum.ShapeTypeEnum.RoundRect, { adj1: 5000 }) .build()fSlide.insertImage(imageInfo)Types: ShapeTypeEnum · Record
Package: @univerjs-pro/slides · Type definitions
FImageBuilder.setCrop
Sets the crop rectangle of the image.
setCrop(crop: ISlideImageElement['crop']): thisParameters
crop— Required. The crop rectangle.
Returns
This builder, for chaining.
Examples
const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const imageInfo = fSlide .newImage() .setSource('https://example.com/image.png', univerAPI.Enum.ImageSourceType.URL) .setCrop({ left: 10, top: 10, right: 10, bottom: 10, }) .build()fSlide.insertImage(imageInfo)Types: ISlideImageElement
Package: @univerjs-pro/slides · Type definitions
FImageBuilder.setRotation
Sets the rotation of the image in degrees.
setRotation(rotation: number): thisParameters
rotation— Required. The rotation in degrees.
Returns
This builder, for chaining.
Examples
const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const imageInfo = fSlide .newImage() .setSource('https://example.com/image.png', univerAPI.Enum.ImageSourceType.URL) .setRotation(15) .build()fSlide.insertImage(imageInfo)Package: @univerjs-pro/slides · Type definitions
FImageBuilder.setShapeData
Sets shape-style data for the image frame, such as picture border.
setShapeData(shapeData: ISlideImageElement['shapeData']): thisParameters
shapeData— Required. Shape-style data reused from the shape model.
Returns
This builder, for chaining.
Examples
const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const imageInfo = fSlide .newImage() .setSource('https://example.com/image.png', univerAPI.Enum.ImageSourceType.URL) .setShapeData({ stroke: { color: '#FF0000', width: 2, lineStrokeType: univerAPI.Enum.ShapeLineTypeEnum.SolidLine, }, }) .build()fSlide.insertImage(imageInfo)Types: ISlideImageElement
Package: @univerjs-pro/slides · Type definitions
FImageBuilder.setSize
Sets the image size in slide pixels.
setSize(width: number, height: number): thisParameters
width— Required. The image width.height— Required. The image height.
Returns
This builder, for chaining.
Examples
const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const imageInfo = fSlide .newImage() .setSource('https://example.com/image.png', univerAPI.Enum.ImageSourceType.URL) .setSize(320, 180) .build()fSlide.insertImage(imageInfo)Package: @univerjs-pro/slides · Type definitions
FImageBuilder.setSource
Sets the image source.
setSource(source: string, imageSourceType?: ImageSourceType): thisParameters
source— Required. The image URL, base64 data URI, or image id.imageSourceType— Optional. The image source type. Which can be found fromImageSourceType.
Returns
This builder, for chaining.
Examples
const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const imageInfo = fSlide .newImage() .setSource('https://example.com/image.png', univerAPI.Enum.ImageSourceType.URL) .build()fSlide.insertImage(imageInfo)Types: ImageSourceType
Package: @univerjs-pro/slides · Type definitions
FImageBuilder.shapeData
shapeData: ISlideImageElement['shapeData']Types: ISlideImageElement
Package: @univerjs-pro/slides · Type definitions
FImageBuilder.source
source: stringPackage: @univerjs-pro/slides · Type definitions
FImageBuilder.subUnitId
subUnitId: stringPackage: @univerjs-pro/slides · Type definitions
FImageBuilder.transform
transform: ISlideDrawingTransformTypes: ISlideDrawingTransform
Package: @univerjs-pro/slides · Type definitions
FImageBuilder.unitId
unitId: stringPackage: @univerjs-pro/slides · Type definitions
你觉得这篇文档如何?