How to make an image unsaved?

[marjan_m]

Hi,

I want to make images on my webpage unsaved.It means that the user cannot copy or save them,how it can be possible.As on some web pages I saw images which cant be copy of saved.

Please guide.

Kind Regards,

[JonathanD]

It's impossible.

Browsers need to be able to render images.

Even if they couldn't save them, they could just take a screenshot and paste them into a favorite image editor.

The best bet for you is to watermark the images.

http://en.wikipedia.org/wiki/Digital_watermarking

[marjan_m]

It's impossible.

Browsers need to be able to render images.

Even if they couldn't save them, they could just take a screenshot and paste them into a favorite image editor.

The best bet for you is to watermark the images.

http://en.wikipedia.org/wiki/Digital_watermarking

Thanks for reply.

I cant get an idea to watermark an image,but i get a java script to disable right click and print screen key.Also I get a software that converts the image in small slices so that it will be very difficult for a user to copy an image.

[JonathanD]

Again, it doesn't matter if someone can right click or not.

I can take a screenshot and paste the image into my favorite image editor and I have the image.

If you really want it protected, either A) don't put it online or B) use a watermark.

Here are some examples of watermarks, http://www.photomark.biz/examples.htm

[marjan_m]

Thanks for providing examples.

I hv quoted b4 that Java script I found can also disable the screen shot key,so I think it can work.

Chk this

<script language=JavaScript>

var message="Function Disabled!";


function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("return false")
</script>

[buddylee17]

You can do whatever you want with JavaScript. JavaScript runs on the users machine, is under complete control of the user, and the user can disable it (easily). While disabling right click or print screen will keep the average user at bay, it will not stop someone who understands what really goes on when a page is rendered by the browser. It seems that you are content on disregarding Jonathan's advice so I leave you with this: Install the Firefox browser and the web developer add in found here. Now click on Disable -> All JavaScript. Now see if you can't download any image displayed. Right about now you should be at google looking into watermarking images.

[marjan_m]

You can do whatever you want with JavaScript. JavaScript runs on the users machine, is under complete control of the user, and the user can disable it (easily). While disabling right click or print screen will keep the average user at bay, it will not stop someone who understands what really goes on when a page is rendered by the browser. It seems that you are content on disregarding Jonathan's advice so I leave you with this: Install the Firefox browser and the web developer add in found here. Now click on Disable -> All JavaScript. Now see if you can't download any image displayed. Right about now you should be at google looking into watermarking images.

Thanks for ur reply.

I m not saying that any of member's (who replied on ths thread) comments and advices are false.I am here just to discuss with all the people who are having experties in different domains.I was just sharing my info with all of u.This info can be or cannot be accurate or up to ur level.

I also quoted before tht I got a software which distributes an image on the webpage in the small pieces as the user mentioned.It can also be a solution of this problem.

With regards to water mark an image,it is a good solution bt wht to do in a case whn a website is designed with all the images? Then all the images with the water mark effect will not look good,so thats why i ws discussing another solution of ths problem.

Regards,

[Troy III]

There is however at least one browser in the world that can almost guarantee that your images will be 99% of the time "Safe".
That's EXPLORER!

Explorers 4, 5, 6, 7&8b are still making more than 78% of client browses. The other 22% will still have Explorer installed somewhere. So your client might very well be more than satisied with it.

So, your page might well be considered content secure and your clients will understand that the measure is taken for protection, therefore they will invoke their explorers to visit the page.

But than everything depends on your building strategy.

You must first make sure nothing remains cached in the browser cache.

1. This far your first step should be to disable caching in the document header:

<META HTTP-EQUIV="Expires" CONTENT="-1">
 <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

To be sure that you have no cache in IE you shuld repeat this once again after the body closing tag

</BODY>
<HEAD>
 
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
 
</HEAD>
 </HTML>

*This measure: because IE scans documents twice (up-down) to make sure, (if possible), all the code errors are corrected. During this prcedure it might catch some cache.

2. The next step:

The very first thing you shoud do is to put this in your document body:

<SPAN Id=warning style="font: 30pt bold; display: block">
 <CENTER>WARNING:<BR>
	JavaScript Disbled !<BR>
	<I>Unable To Process Content</I> 
 </CENTER>
</SPAN>

This will prevent javascript disabled klints to see anything else. So consider this strategy as no script function protection measure.

3. So far so good. Let's take it further:

Prepare divs as containers of your images. Why not use div background instead of img tags?

<DIV style="width:200; height:128; background-image:url('')"></DIV>
<DIV style="width:200; height:128; background-image:url('')"></DIV>
<DIV style="width:200; height:128; background-image:url('')"></DIV>

(Considering javascript disabled browsers -
Initially, these divs should be empty! Another thing to have in mind is that for real world situations these divs should have classNames asigned and style instructions separated. But in case when nothing else will be displayed in the page except some text over images there is no neeed to add anyting except soome text font formating.

4. Next little step is to cover all your images with another transparent html that will disable rightclick save background as... on top of them without any scripting hasle.

After image divs you should add this:

<SPAN Style="position:absolute; top:0px; left:0px; width:100%; height:100%; background-color: transparent;"></SPAN>

This will suffice for rightclick prevention. And the best of it - it will not mess up the browser functionality and will leave everything else intact.

Needless to mention, but pervious steps will ensure that CSS disabled browser get the same message as javascript disabled. There is another way to get another costum message for css disabled browsers with javascript enabled in casse its important. But I will not describe it here.

Now let's see what is left. We've so far disabled the caching and the rightclick and similar image copying absolutely unobtrusively.

But we should take further steps to ensure that Page-Info and similar dont show original images in their collection. This is where JavaScript comes to play.

5.But first we have to get images in display, Since we don't have them exposed yet.

<script>
//but first of all we ahve to remove the warnig
var warning = document.getElementById("warning").style.display="none"

var images = document.getElementsByTagName("DIV") 
/*we should locate our protected images to be able to call them as follows: */
var tmpImages =
	new Array(
			"url(first.jpg)",
			"url(second.jpg)",
			"url(third.jpg)",
			"url(fourth.jpg)"
		//	  ... etc ...		//
					);

// Now we finally load them
   for(var i = 0; i < images.length; i++){
        images[i].style.backgroundImage = tmpImages[i]  } 

</script>

We've set images to get displayed automatically for javascript enabled browsers.

So far so fine. Our next step is: How to proceed if user takes some suspicious action and What might that be?

a) the user clicks outside of the document
b) mouse left document reaching for something "suspicious".
c) window lost focus because of some other aplication is invoked.
d) a key was presssed or released
I can't recall all! But the main question is: "what action to take in that situation?"

I think that the first step on this should be to replace protected images with something that I will call an offlineImage.

6. For that we shall need another function:

<script>
function protectImages(){
    for(var i = 0; i < images.length; i++){
        images[i].style.backgroundImage = "url(ImageOffLine.jpg)"
    }   clearRAM();
  }
</script>

Now we have the function that will replace protected images with our offline image that might also contain some other printed message or copyright notice.

7. But we'll need originals back; since we didn't write a function for geting images displayed during load time we need to write a new one now:

<script>
function restoreImages(){
    for(var i = 0; i < images.length; i++){
        images[i].style.backgroundImage = tmpImages[i]
    }   clearRAM();
 }

</script>

There would be no need to clean clipboard from the screen copy the user has made in casse the printScreen key would have been decent enough to fire the event, - but it doesn't, so there is no way of knowing if printscreen key has been pressend. This is where Firefox becomes unsuportive and fals down to the group of browsers that should not be allowed to view your copyrightet pictures in case you don't want them to be stollen :p.

8. This way we are forced to use any other event to clear possible RAM copy of our images since we can't prevent it unle4ss we don't know when and where it is taking place.

<script>
function clearRAM(){
	if(document.all){
/*Using IE advanced features to clear RAM  replacing RAM content with an appropriate warning */
		window.clipboardData.setData(
"Text","It is prohibited to copy distribute or in any way alter these copyrighted images");
		}
 }
</script>

All right this would be about all there is. Our final step will be invoking these functions when needed; but giving it a seccond thought it is probably the best if we attach the clearRAM function to be invoked with both of them default functions
so I will go back and add a call to it right now.

9. The final step: invoking protection functions on suspicious events.

<script>
window.onblur = offline;
window.onfocus = restoreImages;

document.onmouseover = restoreImages;
document.onmouseout=offline;

document.onkeydown = offline;
document.onkeyup = restoreImages;

window.onunload = clearRAM;


/ * * * * * * * * * * * * *
  *  b.b. Troy III p.a.e.   *
  * * * * * * * * * * * * */ 
</script>

Of course there are ways to enhance and optimize this code further but this would be something like my final Beta.

Regards.

[vicky_rawat]

Hi Troy,

Its wonderful information.

Thanks.

[marjan_m]

There is however at least one browser in the world that can almost guarantee that your images will be 99% of the time "Safe".
That's EXPLORER!

Explorers 4, 5, 6, 7&8b are still making more than 78% of client browses. The other 22% will still have Explorer installed somewhere. So your client might very well be more than satisied with it.

So, your page might well be considered content secure and your clients will understand that the measure is taken for protection, therefore they will invoke their explorers to visit the page.

But than everything depends on your building strategy.

You must first make sure nothing remains cached in the browser cache.

1. This far your first step should be to disable caching in the document header:

<META HTTP-EQUIV="Expires" CONTENT="-1">
 <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

To be sure that you have no cache in IE you shuld repeat this once again after the body closing tag

</BODY>
<HEAD>
 
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
 
</HEAD>
 </HTML>

*This measure: because IE scans documents twice (up-down) to make sure, (if possible), all the code errors are corrected. During this prcedure it might catch some cache.

2. The next step:

The very first thing you shoud do is to put this in your document body:

<SPAN Id=warning style="font: 30pt bold; display: block">
 <CENTER>WARNING:<BR>
	JavaScript Disbled !<BR>
	<I>Unable To Process Content</I> 
 </CENTER>
</SPAN>

This will prevent javascript disabled klints to see anything else. So consider this strategy as no script function protection measure.

3. So far so good. Let's take it further:

Prepare divs as containers of your images. Why not use div background instead of img tags?

<DIV style="width:200; height:128; background-image:url('')"></DIV>
<DIV style="width:200; height:128; background-image:url('')"></DIV>
<DIV style="width:200; height:128; background-image:url('')"></DIV>

(Considering javascript disabled browsers -
Initially, these divs should be empty! Another thing to have in mind is that for real world situations these divs should have classNames asigned and style instructions separated. But in case when nothing else will be displayed in the page except some text over images there is no neeed to add anyting except soome text font formating.

4. Next little step is to cover all your images with another transparent html that will disable rightclick save background as... on top of them without any scripting hasle.

After image divs you should add this:

<SPAN Style="position:absolute; top:0px; left:0px; width:100%; height:100%; background-color: transparent;"></SPAN>

This will suffice for rightclick prevention. And the best of it - it will not mess up the browser functionality and will leave everything else intact.

Needless to mention, but pervious steps will ensure that CSS disabled browser get the same message as javascript disabled. There is another way to get another costum message for css disabled browsers with javascript enabled in casse its important. But I will not describe it here.

Now let's see what is left. We've so far disabled the caching and the rightclick and similar image copying absolutely unobtrusively.

But we should take further steps to ensure that Page-Info and similar dont show original images in their collection. This is where JavaScript comes to play.

5.But first we have to get images in display, Since we don't have them exposed yet.

<script>
//but first of all we ahve to remove the warnig
var warning = document.getElementById("warning").style.display="none"

var images = document.getElementsByTagName("DIV") 
/*we should locate our protected images to be able to call them as follows: */
var tmpImages =
	new Array(
			"url(first.jpg)",
			"url(second.jpg)",
			"url(third.jpg)",
			"url(fourth.jpg)"
		//	  ... etc ...		//
					);

// Now we finally load them
   for(var i = 0; i < images.length; i++){
        images[i].style.backgroundImage = tmpImages[i]  } 

</script>

We've set images to get displayed automatically for javascript enabled browsers.

So far so fine. Our next step is: How to proceed if user takes some suspicious action and What might that be?

a) the user clicks outside of the document
b) mouse left document reaching for something "suspicious".
c) window lost focus because of some other aplication is invoked.
d) a key was presssed or released
I can't recall all! But the main question is: "what action to take in that situation?"

I think that the first step on this should be to replace protected images with something that I will call an offlineImage.

6. For that we shall need another function:

<script>
function protectImages(){
    for(var i = 0; i < images.length; i++){
        images[i].style.backgroundImage = "url(ImageOffLine.jpg)"
    }   clearRAM();
  }
</script>

Now we have the function that will replace protected images with our offline image that might also contain some other printed message or copyright notice.

7. But we'll need originals back; since we didn't write a function for geting images displayed during load time we need to write a new one now:

<script>
function restoreImages(){
    for(var i = 0; i < images.length; i++){
        images[i].style.backgroundImage = tmpImages[i]
    }   clearRAM();
 }

</script>

There would be no need to clean clipboard from the screen copy the user has made in casse the printScreen key would have been decent enough to fire the event, - but it doesn't, so there is no way of knowing if printscreen key has been pressend. This is where Firefox becomes unsuportive and fals down to the group of browsers that should not be allowed to view your copyrightet pictures in case you don't want them to be stollen :p.

8. This way we are forced to use any other event to clear possible RAM copy of our images since we can't prevent it unle4ss we don't know when and where it is taking place.

<script>
function clearRAM(){
	if(document.all){
/*Using IE advanced features to clear RAM  replacing RAM content with an appropriate warning */
		window.clipboardData.setData(
"Text","It is prohibited to copy distribute or in any way alter these copyrighted images");
		}
 }
</script>

All right this would be about all there is. Our final step will be invoking these functions when needed; but giving it a seccond thought it is probably the best if we attach the clearRAM function to be invoked with both of them default functions
so I will go back and add a call to it right now.

9. The final step: invoking protection functions on suspicious events.

<script>
window.onblur = offline;
window.onfocus = restoreImages;

document.onmouseover = restoreImages;
document.onmouseout=offline;

document.onkeydown = offline;
document.onkeyup = restoreImages;

window.onunload = clearRAM;


/ * * * * * * * * * * * * *
  *  b.b. Troy III p.a.e.   *
  * * * * * * * * * * * * */ 
</script>

Of course there are ways to enhance and optimize this code further but this would be something like my final Beta.

Regards.

Thanks for providing this information and guidance.