Clipboard ActiveX for Image Copy/Paste into Web Forms

• Download demo project - 19.34 KB
• Download source - 17.37 KB

Introduction

One of my client requirements was to use Windows copy/paste functionality on Web forms for Images. The client wished to have CTRL+V to paste any image on the client machine or on the clipboard. I just did some Googling and got few modules performing individual tasks. I modified them as per my requirements. The ActiveX gives the following functionalities:

• Copy Image files from client machine and paste it into our Web forms
• Upload that image onto our server
• Use any image content like Microsoft Paint to use cropped part of any image, or Print Screen etc.

Note: My requirement was for using multiple DIVs on forms to use these functionalities, and hence you will find some conditions in JavaScript code in the demo project.

Requirements

As this is a very basic ActiveX control, it has not been signed yet. So in order to use this activeX, you need to Add your site to "Trusted Sites" as well as reduce your browser security levels down so that your browser can use unsigned ActiveX controls for the time being.

You can do this by going to Tools >> Options >> Security >> Trusted Sites.

If you are uploading an image to the server, your Web site requires one folder called Upload with appropriate privileges.

Using the Code

This whole implementation is full use of JavaScripts. I am showing you the important ones here. Form's BODY tag is calling the KeyPress() event, and that function calls the fnCall() function which performs the core operation of Copy/Paste.

Code Description for Demo Project

The HttpUtil1.aspx page is used to upload the pasted image onto the server. postVar is used to pass the query string values to that httpUtil page, id is used to create a sub folder under the Upload folder and will upload a file into it. You can use any generated random number to create different folders each time.

 strURL = strURL + "/HttpUtil1.aspx";
                        postVar = "id=1";

This ActiveX creates temporary files on the client's machine. It only creates files if the user has not copied any existing image (like Paint cut or Print Screen etc). The path where it creates those files can be configured from the code below:

// Getting the Physical path on which the images will be stored on client machine.
var PhysicalPathForTempImage = "c:\\Amit\\";

Below is the call to the ActiveX method to create and save clipboard image onto the client's machine which later can be uploaded onto the server.

var strFilePath = objActiveX.getCopiedImage(PhysicalPathForTempImage);

After pasting the image into DIV, we can upload that onto the server with the same ActiveX. We cannot directly upload the image using any server code or JavaScript since what we have on hand is just fileName, instead of any fileUpload object containing image stream or something like that. So that uploading logic has been shifted into ActiveX logic.

response = objActiveX.UploadFiles(strFileName,strURL,postVar);

Code Description for ActiveX Project

I have used the basic USE32 for clipboard operations and kernel32 for GlobalAlloc, GlobalFree, GlobalLock, etc.

' Clipboard routines.
Private Declare Function OpenClipboard Lib "USER32" (ByVal hWnd As Long) As Long
Private Declare Function CloseClipboard Lib "USER32" () As Long
Private Declare Function SetClipboardData Lib "USER32" _
    (ByVal wFormat As Long, ByVal hMem As Long) As Long
Private Declare Function GetClipboardData Lib "USER32" (ByVal wFormat As Long) As Long

' Global memory routines.
Private Declare Function GlobalAlloc Lib "kernel32" _
    (ByVal wFlags As Long, ByVal dwBytes As Long) As Long
Private Declare Function GlobalFree Lib "kernel32" (ByVal hMem As Long) As Long
Private Declare Function GlobalLock Lib "kernel32" (ByVal hMem As Long) As Long
Private Declare Function GlobalUnlock Lib "kernel32" (ByVal hMem As Long) As Long
Private Declare Sub CopyMem Lib "kernel32" Alias "RtlMoveMemory" _
    (Destination As Any, Source As Any, ByVal Length As Long)

Below is the call to SaveAsJPG module to save the image content into an image file. This saves the file in very compressed size, unlike if we use the SavePicture() method of VB 6.0 which saves files around 2-3 MB in size, while this module saves a file around 60-80 KB of size.

Call SaveAsJPG.SaveJPG(Clipboard.GetData(vbCFBitmap), strTargetFilePath)

In order to upload the pasted image, this ActiveX method sends an HTTP Request to the httpUtil.aspx page to save the image contents to server.

Function UploadFiles(strFileName1 As String, strUrl As String, _
    Optional postVar As String, _
    Optional strUserName As String, Optional strPassword As String) As String

' Set the user name and password.
        WinHttpReq.SetCredentials strUserName, strPassword, _
        HTTPREQUEST_SETCREDENTIALS_FOR_SERVER

Points of Interest

When I started merging different modules into ActiveX, I lost link of the module to save the image in compressed mode, and hence my images were generating with a bulky size. I searched a lot to get that module. Finally, I found it from my Google history which I browsed few months ago. Thanks to Google for keeping my browsed links.

History

• 11^th May, 2008: Initial post