Contact us


All times are UTC - 8 hours



   [ 9 posts ] 
Author Message
   


Joined: Wed Sep 25, 2013 5:06 am
Posts: 4
Hi guys,

I'd like to load the image I scan with Dynamic Web TWAIN into a canvas in my html page to be able to do some image elaboration, but I don't know how I can do it and if it's possible :oops:

I've read about Image Viewer into Developer's Guide to manage acquired images, but I don't know if it's possible to use it for my aim.

Any clue?

Thanks a lot in advance

Bye


User avatar
   


Joined: Tue Mar 08, 2005 12:23 am
Posts: 1706
Hi Luca,

Welcome to Dynamsoft TWAIN SDK Forum.

If canvas supports loading images from bytes, then it is possible to load the image I scan with Dynamic Web TWAIN into a canvas in your html page.

Here are the steps:

1.Use this method SetSelectedImageIndex to select the image.
http://www.dynamsoft.com/help/TWAIN/Web ... eIndex.htm

2.Use GetSelectedImagesSize to get the total size of the image.
http://www.dynamsoft.com/help/TWAIN/Web ... esSize.htm

3. Use SaveSelectedImagesToBytes to save the images in buffer to a byte array.
http://www.dynamsoft.com/help/TWAIN/Web ... oBytes.htm

Afterwards, you can load the image from bytes into canvas.

_________________
Vincy
Dynamsoft Support Team
Follow us@Twitter, Facebook


   


Joined: Wed Sep 25, 2013 5:06 am
Posts: 4
Hi Catherine,

thanks for your availability, do you know if it is also possible to know scanned image dimensions (width and height)?

Bye


User avatar
   


Joined: Tue Mar 08, 2005 12:23 am
Posts: 1706
Hi Luca,

Thanks for your reply.

Luca wrote:
Do you know if it is also possible to know scanned image dimensions (width and height)?


yes, it's possible. You can use the methods GetImageWidth and GetImageHeight to return the width/height (pixels) of the selected image.

BTW, if you haven't downloaded the 30-day trial of Dynamic Web TWAIN, you can download it from:
https://www.dynamsoft.com/Secure/Regist ... omDownload

Please feel free to give it a shot. :)

_________________
Vincy
Dynamsoft Support Team
Follow us@Twitter, Facebook


   


Joined: Wed Sep 25, 2013 5:06 am
Posts: 4
Hi Catherine,

First of all thanks a lot for the references you gave to me

I've got some doubts about how loading scanned images into a canvas:

    I get scanned image size, I've 1257464 bytes (TIFF):

    Code:
    var DWObject = gWebTwain.getInstance();
    DWObject.SetSelectedImageIndex(0,0);
    var size = DWObject.GetSelectedImagesSize(2);   // 1257464


    I get image width and height to set my canvas dimensions (width=1700 - height=2340) and I see I have 24 bitPerPixel (3 bytes):

    Code:
       
    var imageWidth = DWObject.GetImageWidth(0);          // 1700
    var imageHeight = DWObject.GetImageHeight(0);        // 2340
    var bitsPerPixel = DWObject.ImageBitsPerPixel;       // 24 bit = 3 bytes
    document.getElementById("myCanvas").setAttribute("width", imageWidth);
    document.getElementById("myCanvas").setAttribute("height", imageHeight);


But I would have expected to have an image with this size to load into my canvas:

1700 x 2340 x 3 = 11934000 bytes


So, taking into account that canvas has got 4 byte per pixel (Red, Green, Blue and Alpha) I could do:

Code:
   var ary = new Array(size);

   for (var i =0; i<size; i++)
      ary[i] = 0;

   DWObject.SaveSelectedImagesToBytes(size, ary);

   var originalContext = document.getElementById("myCanvas").getContext('2d');
   var imgData = originalContext.getImageData(0, 0, imageWidth, imageHeight);
   var imgByte = imgData.data;

   for (var index=0; index<size; index+=3) {

      imgByte[index]   = ary[index];    // RED
      imgByte[index+1] = ary[index+1];  // GREEN
      imgByte[index+2] = ary[index+2];  // BLUE
      imgByte[index+3] = 255;           // ALPHA
   }

   originalContext.putImageData(imgData, 0, 0);
   


Where am I wrong? :oops:
Do you know if there is already any example about loadind scanned images into canvas?

Thanks in advance,
Luca


User avatar
   


Joined: Tue Mar 08, 2005 12:23 am
Posts: 1706
Hi Luca,

Thanks for your information.

Unfortunately, we don't have such a sample about loading scanned images into canvas. But I'll look further into your code and get back to you ASAP.

Thanks,

_________________
Vincy
Dynamsoft Support Team
Follow us@Twitter, Facebook


   


Joined: Wed Sep 25, 2013 5:06 am
Posts: 4
Thanks Catherine,

I've seen it's possible to save scanned images into filesystem, but I'd like also to have a url of the scanned image so I could load it into an image tag and, in particular, use html5 storing features (session storage and indexedDb to store scanned image). Is there a way to do this?

Thanks in advance!


User avatar
   


Joined: Tue Mar 08, 2005 12:23 am
Posts: 1706
Hi Luca,

Sorry for the delay.

Let me check it with our R&D team and get back to you.

_________________
Vincy
Dynamsoft Support Team
Follow us@Twitter, Facebook


User avatar
   


Joined: Tue Mar 08, 2005 12:23 am
Posts: 1706
Luca wrote:
Thanks Catherine,

I've seen it's possible to save scanned images into filesystem, but I'd like also to have a url of the scanned image so I could load it into an image tag and, in particular, use html5 storing features (session storage and indexedDb to store scanned image). Is there a way to do this?

Thanks in advance!


To have a url of the scanned image, the work flow will be like this:

1. Scan an image to the control.

2. Use the method GetSelectedImagesSize to pre-calculate the file size of the newly scanned image.

3. Use SaveSelectedImagesToBase64Binary to save the selected image in buffer to base64 string.

Here is the code snippet:
Code:
var DWObject = gWebTwain.getInstance();
   var iIndex = DWObject.CurrentImageIndexInBuffer + 1;
   
   var imagedata;
   //DWObject.GetSelectedImagesSize(0);
   var iImageBitDepth = 24;
   iImageBitDepth = DWObject.GetImageBitDepth(DWObject.CurrentImageIndexInBuffer); // get the pixel bit depth of the selected image.
   if(iImageBitDepth ==24)
   {
      DWObject.GetSelectedImagesSize(1);
   }
   else
   {
      DWObject.GetSelectedImagesSize(0);
   }
   imagedata = DWObject.SaveSelectedImagesToBase64Binary();
   $('#imgData' + iIndex).attr("src","data:image/png;base64," + imagedata);


Besides, you can also check our thumbnail demo:
http://www.dynamsoft.com/Samples/DWT/DW ... vanced.htm

In this demo, we also have a url of the scanned image first and then load it into an image tag, as you can see the thumbnails in the left corner of the page.

Download the demo: http://www.dynamsoft.com/Downloads/Down ... ?DemoID=18

_________________
Vincy
Dynamsoft Support Team
Follow us@Twitter, Facebook


Display posts from previous:  Sort by  
   [ 9 posts ] 


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
cron
Copyright © 2018 Dynamsoft | All Rights Reserved
dynamic designed by Dynamsoft team
Fatal: Not able to open ./cache/data_global.php