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
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
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
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:
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
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
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
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
WinHttpReq.SetCredentials strUserName, strPassword, _
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.
- 11th May, 2008: Initial post