Class ImageDrawingItem

The ImageDrawingItem class extends the functionality of the DrawingItem class and is specifically tailored to handle image-related drawing operations.

ImageDrawingItem

Constructor for the class.

constructor(
    image: DSImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement,
    rect: Rect,
    maintainAspectRatio: boolean,
    drawingStyleId?: number
)

Parameters

image: the image to be drawn, which can be one of several types, including DSImageData or standard HTML elements for images, canvas, or video.

rect: defines the rectangle area within which the image will be drawn.

maintainAspectRatio: determines whether the image’s aspect ratio should be maintained when it is drawn. If true, the height in rect may be adjusted to preserve the image’s aspect ratio.

drawingStyleId: [Optional] the unique ID of the DrawingStyle to apply to this DrawingItem.

Code Snippet

<div style="display:none;">
  <img id="source" src="path-to-source-image.jpg" width="300" height="227" />
</div>

let cameraView = cameraEnhancer.getCameraView();
let drawingLayer = cameraView.createDrawingLayer();
const image = document.getElementById("source");
let imgItem = new Dynamsoft.ImageDrawingItem(
    image, 
    {
        x: 50, 
        y: 50, 
        width: 640, 
        height: 360, 
        isMeasuredInPercentage: false
    }, 
    true,
    3
);
drawingLayer.addDrawingItem(imgItem);

See also

DSImageData

Rect

maintainAspectRatio

Determines whether the image’s aspect ratio should be maintained when it is drawn.

Invoke renderAll() for the change to take effect if the DrawingItem has already been added to a DrawingLayer.

maintainAspectRatio: boolean;

Code Snippet

imgItem.maintainAspectRatio = true;
drawingLayer.renderAll();

getImage

Retrieves the current image being used for drawing. The return type can be any of the specified types, depending on what was set.

getImage(): DSImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement;

Parameters

None.

Return Value

The current image being used for drawing.

Code Snippet

imgItem.getImage();

setImage

Sets the image to be used for drawing. This method allows changing the image after the object has been instantiated.

Invoke renderAll() for the change to take effect if the DrawingItem has already been added to a DrawingLayer.

setImage(image: DSImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement): void;

Parameters

image: the image to be drawn, which can be one of several types, including DSImageData or standard HTML elements for images, canvas, or video.

Return Value

None.

Code Snippet

imgItem.setImage(/*A-New-Image*/);

See also

DSImageData

getImageRect

Returns the rectangle area within which the image is drawn.

getImageRect(): Rect;

Parameters

None.

Return Value

The rectangle area within which the image is drawn.

Code Snippet

imgItem.getImageRect();

setImageRect

Sets the rectangle area within which the image should be drawn. This method allows for the adjustment of position and size of the image.

The change takes effect right away.

setImageRect(rect: Rect): void;

Parameters

rect: defines the rectangle area within which the image should be drawn.

Return Value

None.

Code Snippet

imgItem.setImageRect(
    {
        height: 100, 
        width:300,
        x: 200,
        y :200
    }
);

See Also

Rect