Write an Image in Iframe(Currently IE only)

This is something different I came across, some months back.
We can actually write an Image file in Iframe,this file is visible, but user can't save the file.
This is very simple trick which we can actually use to avoid image copying.
e.g. Though communities like orkut prohibited right click on an image, we can simple drag the image in address bar and can save it. This is something which we can't avoid in normal scenario, but there is one way to deal with this, using ASP.NET and it's handler concept.
I have already talked about ashx file in one of my previous article on image handling

Lets go step by step

Step 1
Create one file names Image.ashx
copy paste following code

<br />using System;<br />using System.Web;<br />using System.IO;<br />using System.Xml;<br />public class Image : IHttpHandler {<br /> <br /> byte[] imageFileBytes = null;<br /> string img = string.Empty;<br /> public void ProcessRequest (HttpContext context) <br /> {<br /> context.Response.ContentType = "Application/octet-stream";<br /> if (context.Request["id"] != null)<br /> {<br /> img = "Images/" + context.Request["id"] + ".jpg";<br /> }<br /> else<br /> {<br /> img = "Images/1.jpg";<br /> }<br /> string physicalPath = context.Server.MapPath(img);<br /> if(File.Exists(physicalPath))<br /> {<br /> imageFileBytes = File.ReadAllBytes(physicalPath);<br /> context.Response.BinaryWrite(imageFileBytes);<br /> //Write image in binary format over Http.<br /> }<br /><br /> }<br /> <br /> public bool IsReusable {<br /> get {<br /> return false;<br /> }<br /> }<br /><br />}<br />

save file, check the assignment of string names "img" in above code.

step 2

In aspx file generally add an Iframe as below

<br /><iframe id="'ifimageshow'" src="Image.ashx" style="width: 440px; height: 360px" contenteditable="true" frameborder="no"></iframe><br />

step 3
Add followin javascript function

<br /><script language="javascript"><br />function zoomImage(src)<br />{<br />window.document.getElementById('ifimageShow').src = src;<br />}<br /></script><br />

step 4
On body 'onload' event call above function as

onload="javascript:zoomImage('Image.ashx?id=1')"<br />

Run your code, make sure that you assign correct Image in Image.ashx file.
Now if you run your code you can get an image in iframe which can't be saved

Tags: Image Hadling, Asp.Net, No Image Copy

Ajax- Image Handling

Ajax like image display. This is a very simple way to display images, and slid the images using generic handlers provided by Asp.Net 2005.

Very simple way to handle images and change images according to user input. This is not exact ajax, but we can use query string to change the image.

We are going to use generic handlers or .ashx file to display image, and change the image simply changing the query string of the ashx file.

This article will be a kick start for the creating web based photo album applications.

We will use Html Image Tag as follows

<br /><br /><img id="Image1" src="Image.ashx?id=1" onmouseover="zoomImage(this.src)" height="210px" width="211px" /><br /><br />

In the source of image, instead of giving image URL we are giving, URL of ashx file.


Our HTML code for form tag is as follows

<br /><br /><form id="form1" runat="server"><br /><br /><table border="1"><br /><br /><tr><br /><br /><td><br /><br /><img id="Image1" src="Image.ashx?id=1" onmouseover="zoomImage(this.src)" height="210px" width="211px" /><br /><br /></td><br /><br /></tr><br /><br /><tr><br /><br /><td><br /><br /><table cellpadding="0" cellspacing="0" style="width: 211px; height: 23px"><br /><br /><tr><br /><br /><td onclick="changeImage(-1)" style="height: 19px"><br /><br /><---Prev</td><br /><br /><td style="height: 19px"><br /><br /> </td><br /><br /><td onclick="changeImage(1)" style="height: 19px"><br /><br />Next---></td><br /><br /></tr><br /><br /></table><br /><br /></td><br /><br /></tr><br /><br /></table><br /><br /><div id="'imageShow'" style="display: none; width: 391px; height: 270px; left: 314px; position: absolute; top: 16px;"><br /><br /><img id="'ifimageShow'" src="" style="width: 435px; height: 435px" /><br /><br /></div><br /><br /><asp:hiddenfield id="hdnId" runat="server" value="2"><br /><br /></form><br /><br />

In above HTML code , we have one div tag with id “imageShow”, on mouse over event of “Image1” we will display original full size image in this div tag.


Hidden field named “hdnId” is used to maintain the id in query string to ASHX file.


We also have following JavaScript function on main page to change the query string of the image source.

<br /><br /><script language="javascript"><br /><br />function changeImage(id)<br /><br />{<br /><br />var hId = parseInt(window.document.getElementById('hdnId').value,0) + id;<br /><br />window.document.getElementById('hdnId').value = hId;<br /><br />window.document.getElementById('Image1').src = "Image.ashx?id=" + hId;<br /><br />}<br /><br />function zoomImage(src)<br /><br />{<br /><br />window.document.getElementById('imageShow').style.display = '';<br /><br />window.document.getElementById('ifimageShow').src = src;<br /><br />}<br /><br /></script><br /><br />

At this point our client side code is done.


Now following is our serverside code written in ashx file.

Ashx is a generic handler, we can use it if there is no need to run any server side page event.

<br /><br />using System;<br /><br />using System.Web;<br /><br />using System.IO;<br /><br />using System.Xml;<br /><br />public class Image : IHttpHandler {<br /><br />byte[] imageFileBytes = null;<br /><br />string img = string.Empty;<br /><br />public void ProcessRequest (HttpContext context)<br /><br />{<br /><br />context.Response.ContentType = "Application/octet-stream";<br /><br />if (context.Request["id"] != null)<br /><br />{<br /><br />img = "Images/" + context.Request["id"] + ".jpg";<br /><br />}<br /><br />else<br /><br />{<br /><br />img = "Images/1.jpg";<br /><br />}<br /><br />string physicalPath = context.Server.MapPath(img);<br /><br />if(File.Exists(physicalPath))<br /><br />{<br /><br />imageFileBytes = File.ReadAllBytes(physicalPath);<br /><br />context.Response.BinaryWrite(imageFileBytes);<br /><br />//Write image in binary format over Http.<br /><br />}<br /><br /><br />}<br /><br />public bool IsReusable {<br /><br />get {<br /><br />return false;<br /><br />}<br /><br />}<br /><br />

We have to set the contentType for binary stream, since we are writing data as a stream.


This is very simple to implement, we can develop complex image album web application using this logic. One Ashx page will be enough to handle many requests.