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
Press the Scan button
Convert the image to black and white
Click the ConvertToBW button and the image will change to black and white:
Rotate the image
Using the Rotate CW and Rotate CCW buttons, rotate the image.
- Rotating the converted image once using the RotateCW button:
- Rotating the converted image once using the RotateCCW button:
Previous Articles
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.