Thanks for Downloading Dynamic Web TWAIN 30-Day Trial!

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

Editing Images

DWT offers a number of ways to manipulate images before exporting the images to a file. These include but are not limited to rotation, cutting, and resizing. For this example, you will be converting an image to black and white, and then rotating the image.

Converting image to black and white

Add a ConvertToBW button in HTML

<input type="button" value="ConvertToBW" onclick="ConvertToBW();" />

Add the function to do the colour conversion

function ConvertToBW(){
    DWObject.ConvertToBW(DWObject.CurrentImageIndexInBuffer);
}

Links to API Reference:

Rotating images

Add Rotate buttons in HTML

<input type="button" value="Rotate CW" onclick="RotateCW();" />
<input type="button" value="Rotate CCW" onclick="RotateCCW();" />

Add functions to perform rotation on the current image

function RotateCW(){
    DWObject.RotateRight(DWObject.CurrentImageIndexInBuffer);
}
function RotateCCW(){
    DWObject.RotateLeft(DWObject.CurrentImageIndexInBuffer);
}

Links to API Reference:

Review the code

<html>

<head>
    <title>Hello World</title>
    <script src="Resources/dynamsoft.webtwain.initiate.js"></script>
    <script src="Resources/dynamsoft.webtwain.config.js"></script>
</head>

<body>
    <input type="button" value="Scan" onclick="AcquireImage();" />
    <input type="button" value="Upload" onclick="Upload();" />
    <input type="button" value="Rotate CW" onclick="RotateCW();" />
    <input type="button" value="Rotate CCW" onclick="RotateCCW();" />
    <input type="button" value="ConvertToBW" onclick="ConvertToBW();" />


    <div id="dwtcontrolContainer"></div>

    <script type="text/javascript">
        var DWObject;

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

        
        function AcquireImage() {
            if (DWObject) {
                DWObject.SelectSourceAsync().then(function () {
                    return DWObject.AcquireImageAsync({ 
                        IfCloseSourceAfterAcquire: true,
                        IfShowUI: false,
                        PixelType: Dynamsoft.DWT.EnumDWT_PixelType.TWPT_GRAY,
                        Resolution: 150,
                    });
                }).catch(function (exp) {
                    alert(exp.message);
                });
            }
        }
        function Upload() {
            if (DWObject && DWObject.HowManyImagesInBuffer > 0) {
                var strUrl = "https://demo.dynamsoft.com/sample-uploads/";
                var imgAry = [DWObject.CurrentImageIndexInBuffer];
                DWObject.HTTPUpload(strUrl, imgAry, Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
                    Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, "WebTWAINImage.png", onUploadSuccess, onUploadFailure);
            } else {
                alert("There is no image in buffer.");
            }
        }

        function onUploadSuccess() {
            alert('Upload successful');
        }

        function onUploadFailure(errorCode, errorString, sHttpResponse) {
            alert(sHttpResponse.length > 0 ? sHttpResponse : errorString);
        }

        function RotateCW(){
            DWObject.RotateRight(DWObject.CurrentImageIndexInBuffer);
        }
        function RotateCCW(){
            DWObject.RotateLeft(DWObject.CurrentImageIndexInBuffer);
        }

        function ConvertToBW(){
            DWObject.ConvertToBW(DWObject.CurrentImageIndexInBuffer);
        }
    </script>
</body>

</html>

Run the application

Open the application in your browser

HelloWorldEdit

Press the Scan button

HelloWorldEditBW1

Convert the image to black and white

Click the ConvertToBW button and the image will change to black and white:

HelloWorldEditBW2

Rotate the image

Using the Rotate CW and Rotate CCW buttons, rotate the image.

Rotating the converted image once using the RotateCW button:

HelloWorldEditCW

Rotating the converted image once using the RotateCCW button:

HelloWorldEditCCW

If you would like to review any of the previous steps, you can review:

Next steps

Congratulations, you have completed the HelloWorld tutorial for DWT.