Image Drag, Drop and Zoom using HTML5 Canvas

Question:

How can I perform drag and drop of images and the zoom in and out of images using HTML5 Canvas element?

By Iyappan Ranganathan

Response:

There are many free Javascript libraries out there to accomplish many drag and drop and other image manipulation features. The one that I have used and satisfied with is KineticJS library. KineticJS exposes events and methods to manage multiple layers, shapes, images, grouping which in combination would help achieve your needs. Specifically the dragstart and dragend events will be the ones you would be interested to implement the drag and drop feature. For zoom in and out you should be using the setScale method.

Check out these links demonstrating the needed features:

HTML5 Canvas KineticJS Scale Animation Tutorial

HTML5 Canvas Drag and Drop an Image

As I said, there are many Javascript libraries and you may pick the one that best suits your needs.

Unknown device on DELL XPS 13

Question:

I use a DELL XPS 13 Ultrabook. Though Windows 7 was the bundled operating system, I have upgraded to Windows 8. Though it all work fine, I see a device in device manager marked as unknown. The properties dialog lists the hardware IDs as ACPI\VEN_INT&DEV_33A0, ACPI\INT33A0 and *INT33A0. My attempts to search DELL driver download have failed as I could not find the appropriate driver. Can you help me find and fix this?

By: Rakesh Sharma

Response:

INT33A0 should be the port for Intel Smart Connect Technology (iSCT). Given that Windows 8 is designed as the OS for PCs and as well as smart devices, there is a need to use the communication components even when the device is in sleep mode. Intel's iSCT enables this feature and this feature is controlled by the System BIOS. Not all hardware may have support for this feature, but those that have the support would have a setting in BIOS to enable this capability. Just make sure, you may check out your BIOS and try disabling this feature and you may notice the 'Unknown device' disappear in the device manager.

The driver for this feature can be downloaded here on the Intel website. Try installing this component and see if your problem gets resolved. You may have to run the installer using 'Run As Administrator', even though the user account with which you have logged in has Administrator privileges.

Image Capture Component for Web Applications

Question:

I am working on a project, which requires acquiring images from scanners in a web browser. I am curious to know if HTML5 / CSS3 in any way help accomplishing this feature or if there are any javascript libraries out there so that the implementation can work across all browsers. Or else, you may suggest various other options available for me to meet this need.

By: Anonymous

Response:

The HTML5 and CSS3 specifications are all about presentation and thus will be able to detect output devices like print, tv, handheld devices, etc, but there isn't any support for input devices like image scanner or camera. Interacting with such devices can however be achieved using javascript and browser specific ActiveX, Browser Plugin or an Applet. There are many third party libraries with varying capabilities and support for a multitude of programming languages, which can be wrapped within an appropriate component and then use Javascript to interact with it.

I have personally used the EZTwain Library for the windows platform by building a Visual Basic based ActiveX component earlier on and later using VB.NET based library and used it within IE successfully. This library however has support for very many programming languages including C++ and Java. Its usage can be extended across various other browsers by wrapping it within an appropriate component. EZ Twain seems to be reasonably priced and comes with royalty free runtime distribution.

If you are a hardcore programmer, this Code Project Article is worth a look, where the author demonstrates building a C++ wrapper using the TWAIN_32.DLL which used to be distributed by Microsoft in earlier versions of Windows. In later versions of Windows (Windows XP SP1 and later), Microsoft has Windows Image Acquisition Automation Layer, which is worth exploring.

ByteScout Scan SDK is another free (FreeBSD License) library for .NET based applications which can also be explored for its extensibility into other environments. Dynamsoft has an image capture suite with pre-built and ready to consume components for various browsers, but carries a hefty price tag though.

The following are few other Tool kits that are worth exploring.

LeadTools Twain SDK
Acusoft's ImageGear for .NET

ActiveX Image Edit and Twain Control - csXImage

Victor Image Processing Library

Almost all of the solutions above are targeted at Windows platform. If you are expecting your solution to work on Non windows platform, you should look for similar libraries and build similar wrapper components for the target browser / platform combination.