# Crop and Resize

## Content

DsImageViewer provides functionality to crop and resize an image through the Page tools plug-in. The <strong>Crop image</strong>(![crop-pagetool.png](https://cdn.mescius.io/document-site-files/images/8f8ddd13-6a19-4879-8713-7794513e3372/crop-pagetool.7da7b4.png)) and <strong>Resize image</strong>(![resize.png](https://cdn.mescius.io/document-site-files/images/8f8ddd13-6a19-4879-8713-7794513e3372/resize.7c9d18.png)) buttons appear in the second toolbar which displays on clicking the Page tools plug-in icon(![page-tools-icon](https://cdn.mescius.io/document-site-files/images/b882ef15-67ec-41e0-8e66-2977bfeb3645/page-tools-icon.9faa75.png)).

# Crop Image

DsImageViewer allows you to crop the image by specifying the top-left coordinates, height, and width of the image. These settings are available through the **Crop** toolbar, which appears upon clicking the Crop image button. The dialog also provides the **Custom aspect** dropdown, which automatically adjusts the height or width of the image when you specify one of them, thus giving you the desired aspect ratio of the cropped image. The **Cancel** button in the dialog lets you revert the image to its original size and closes the crop toolbar.
![crop-image](https://cdn.mescius.io/document-site-files/images/b882ef15-67ec-41e0-8e66-2977bfeb3645/crop-image.b00765.gif)
DsImageViewer also allows you to crop an image interactively. To crop an image interactively, you can drag the dotted edges of the image, which appear upon clicking the **Crop image** button.
![manual-crop-image](https://cdn.mescius.io/document-site-files/images/b882ef15-67ec-41e0-8e66-2977bfeb3645/manual-crop-image.4f9bb4.gif)
To crop the image through code, you can use [crop](https://developer.mescius.com/document-solutions/javascript-image-viewer/api/classes/PageToolsPlugin#crop) method of the [PageToolsPlugin](https://developer.mescius.com/document-solutions/javascript-image-viewer/api/classes/PageToolsPlugin) class. The method provides you options to set the xposition, yposition, height, width and aspect ratio of the image.

```javascript
function cropImage() {
viewer.findPlugin("pageTools").crop(100, 100, 400, 200).then(function (e) {
    if (e) {
        console.log("Image Cropped");
    } else {
        console.log("Image croping failed");
    }
})
}
```

# Resize Image

To resize an image, you can click the **Resize image** button to open a **Resize** toolbar. This toolbar lets you set desired image measurements and provides a toggle button that allows you to keep the aspect ratio. The **Keep aspect** setting enables you to retain the ratio of an image's width to its height while resizing. When this setting is enabled and one of the dimensions is set, DsImageViewer automatically calculates the value of the other dimension based on the aspect ratio.
![resize-image](https://cdn.mescius.io/document-site-files/images/b882ef15-67ec-41e0-8e66-2977bfeb3645/resize-image.129b7f.gif)
DsImageViewer also allows you to resize an image interactively. To resize an image interactively, you can drag the dotted edges of the image, which appear upon clicking the Resize image button.
![manual-resize-image](https://cdn.mescius.io/document-site-files/images/b882ef15-67ec-41e0-8e66-2977bfeb3645/manual-resize-image.823842.gif)
You can also resize the image through code by using [resize](https://developer.mescius.com/document-solutions/javascript-image-viewer/api/classes/PageToolsPlugin#resize) method of the [PageToolsPlugin](https://developer.mescius.com/document-solutions/javascript-image-viewer/api/classes/PageToolsPlugin) class. The method lets you specify the width, height and whether to maintain the original aspect ratio of the image or not.

```javascript
function resizeImage() {
    viewer.findPlugin("pageTools").resize(600, 400, true).then(function (e) {
        if (e) {
            console.log("Image Resized");
        } else {
            console.log("Image resizing failed");
        }
        
    })
}
```

>type=note
> <strong>Note</strong>**:** The DsImageViewer control does not support editing of multi-frame and animation images such as .gif, .ico, .tiff, and .svg files.