Thanks for Downloading Dynamic Web TWAIN 30-Day Trial!

Your download will start shortly. If your download does not begin, click here to retry.

Image Editing

How can I erase everything outside the selected area of an image?

Dynamic Web TWAIN does not have a built-in “inverse selection” API, but you can achieve the same result by combining the pageAreaSelected event with the Erase() method.

The idea is to treat the area outside the selected rectangle as four rectangles (top, bottom, left and right) and erase each of them. The selected area stays as it is, everything else is filled with white, and the image keeps its original width and height.

Note: If you want to remove the area outside the selection and shrink the image to the selected size, use Crop() instead.

 (0,0) ┌──────────────────────────────┐
       │           1. Top             │
       ├────────┬───────────┬─────────┤ y
       │ 3.Left │ Selected  │ 4.Right │
       │        │   area    │         │
       ├────────┴───────────┴─────────┤ y + height
       │          2. Bottom           │
       └──────────────────────────────┘ (imageWidth, imageHeight)
                x         x + width

Example

<div id="dwtcontrolContainer"></div>
<button onclick="eraseOutsideSelection()">Erase Outside Selection</button>

<script type="text/javascript">
    let DWTObject;
    let selection = null; // { index, x, y, width, height }

    function Dynamsoft_OnReady() {
        DWTObject = Dynamsoft.DWT.GetWebTwain("dwtcontrolContainer");

        // Record the selected area when the user draws or moves a rectangle
        DWTObject.Viewer.on("pageAreaSelected", (index, rect) => {
            const area = rect[0];
            selection = {
                index: index,
                x: area.x,
                y: area.y,
                width: area.width,
                height: area.height,
            };
        });

        // Clear the record when the selection is removed
        DWTObject.Viewer.on("pageAreaUnselected", () => {
            selection = null;
        });
    }

    function eraseOutsideSelection() {
        if (!selection) {
            alert("Please select an area on the image first.");
            return;
        }

        const { index, x, y, width, height } = selection;
        const imgWidth = DWTObject.GetImageWidth(index);
        const imgHeight = DWTObject.GetImageHeight(index);

        // The four areas around the selection: [left, top, right, bottom]
        const areas = [
            [0, 0, imgWidth, y],                         // 1. Top
            [0, y + height, imgWidth, imgHeight],        // 2. Bottom
            [0, y, x, y + height],                       // 3. Left
            [x + width, y, imgWidth, y + height],        // 4. Right
        ];

        areas.forEach(([left, top, right, bottom]) => {
            // Skip empty areas, e.g. when the selection touches the image edge
            if (right > left && bottom > top) {
                DWTObject.Erase(index, left, top, right, bottom);
            }
        });
    }
</script>

Note:

The coordinates returned by pageAreaSelected are based on the actual image pixels, so they can be passed to Erase() directly.

If the user draws multiple areas on one page, rect contains all of them. The example above only handles the first one (rect[0]).

The left and right areas only cover the height of the selection, so no part of the image is erased twice.

Original post creation date: Oct 16, 2026

Last modified date: Oct 16, 2026