Preventing a visitor from saving an image from my site - image

What are some effective strategies for preventing the use of my proprietary images?
I'm talking about saving them, direct linking to them etc...
Presently I have a watermark on the image, but I'd rather not.
.NET platform preferred, but if there's a strategy that's on another platform that integrates with my existing application that'd be a bonus.

It's not possible to make it "impossible" to download. When a user visits your site you're sending them the pictures. The user will have a copy of that image in the browsers cache and he'd be able to access it even after he leaves the site ( depending on the browser, of course ). Your only real option is to watermark them :O

You could embed each image inside of a flash application, then the browser wouldn't know how to 'save' the image and wouldn't store the raw jpg in the cache folder either. They could still just press the print screen key to get a copy of the image, but it would probably be enough to stop most visitors.

Response.WriteBinary(), embedded flash, JavaScript hacks, hidden divs.
Over the years I have seen and tried every possible way to secure an image and I have come to one conclusion: If it can be seen online; it can be taken, my friend.
So, what you really should consider what the final goal of this action would really be. Prevent piracy? If a gross and oversized watermark is not your style, you can always embed hidden data (Apress had an article that looked promising on digital steganography) in images to identify them as your own later. You might only offer reduced or lower quality images.
Flickr takes the approach of placing a transparent gif layer on top of the image so if you are not logged in and right click you get their ever awesome spaceball.gif. But nothing can prevent a screenshot other than, well, just not offering the picture.
If the music industry could get you to listen to all of your music without copying or owning files they would. If television could broadcast and be certain nobody could store a copy of the cast, they probably would as well. It's the unfortunate part of sharing media with the public. The really good question here is how you can protect your material WITHOUT getting in the way of respectable users from consuming your images. Put on too much protection and nobody will go to your site/use your software (Personally if you try to disable my mouse I'll go from good user to bad nearly instantly).

using JavaScript to override the click event is the most common I have seen...
see: http://pubs.logicalexpressions.com/pub0009/LPMArticle.asp?ID=41

I figure I might as well put in my two cents.
None of the above methods will work with perhaps the exception of a watermark.
Wherever I go, I can hit print screen on my computer and paste into a graphics editor, and with a little cropping, I have your image.
The only way to overcome the watermark issue would be to use photoshop tools to remove the watermark. At this point, i think most people would just give up and pay you for your content or at a minimum go rip off somebody else.

Short answer: you can't. Whatever you display to a user is going to be available to them. You can watermark it, blur it, or offer a low-res version of it, but the bottom line is that whatever images are displayed in the user's browser are going to be available to them in some way.

It's just not possible. There is always the PrintScreen button.
Whatever is displayed, can be captured.

I would watermark them, and reduce the resolution, of the actual files, instead of doing it through an application on the user's end.

unfortunately you can always screen grab the browser and crop the image out, not perfect but it circumvents almost every solution posted here :(

Another approach I've seen that's still entirely vulnerable to screen grabs but does make right-click and cache searching sufficiently annoying is to break the image up into many little images and display them on your page tiled together to appear as though they were a single image. But as everyone has said, if they can see it, they can grab it.

Realistically you can't, unless you don't want them to see it in the first place. You could use some javascript to catch the right mouse button click, but that's really about it.
Another thought, you could possibly embed it in flash, but again, they could just take a screenshot.

Sorry. That's impossible. All you can do is make it inconvenient a la flickr.

It's just not possible. There is always the PrintScreen button.
I remember testing ImageFreeze years ago. It used a Java applet to fetch and display images. The image data and connection was encrypted and the unencrypted image wasn't stored in a temp folder or even in Java's cache.
Also, the applet constantly cleared the windows clipbrd so Print Screen didn't work.
It worked pretty good, but it had some faults.
Besides requiring Java, the JS that embedded the applet (and maybe the applet itself) was setup to not load properly in any browser that didn't give access to the windows clipbrd. This meant that it only worked in IE and only on windows.
Also, the interval the applet used to clear the clipbrd could be beaten with a really fast Print Screen and ctrl+v into Gimp. Printing the screen in other ways would work too.
Finally, Jad could decompile the applet and all/most of its files. So, if you really wanted the pics, you could poke around in the source to figure out how they did it.
In short, you can go out of your way to stop a lot of people, but usability goes down the drain and there will always be a way to get the image if the visitor can see it.

Anything you send to the client is, like, on the client. Not much you can do about it besides making somewhere between "sorta hard" and "quite hard" to save the image.

I must say in the begining that it is almost impossible to stop the
images or text being copied, but making it difficult will prevent most
of the users to steal content.. In this article I will give a easier
but effective way of protecting images with html/css. We will take a
very simple way for this… Firstly in a div we will place the image
with a given height and width. (Say 200 X 200)
Now we can place another transparent image with same height and
width and give it a margine of -200. So that it will overlap the
actual image. And when the user will try to copy this, they will end
up with the transparent gif only…
<div style=”float: left;”>
<img src=”your-image.jpg” style=”width: 200px;height: 200px;”/>
<img src=”the-dummy-image.png” style=”border: 0px solid #000; width: 200px; height: 250px; margin-left: -200px; ” />
</div>

Related

Show images very fast, picturebox/panel to slow

Okay the Title can be misleading.
But it´s like this.
I have made an application that constantly sends Images from Client A to Client B.
When Client B receives the image, it will replace the last image.
I currently use Picturebox or Panel, so pretty much:
panel1.BackgroundImage = Image.FromStream((MemoryStream)NetSerializer.Serializer.Deserialize(tt1.GetStream()));
It looks weird though, but as you can se, it will just change the image, when it´s there.
This all goes well up to about 800x600, then it will bottleneck.
I don´t know the update frequency, but i am guessing it´s around 60fps, as i am taking screenshots from my desktop or particular windows.
The bandwidth is not the problem here as long as i don´t use .bmp at 800x600+ of course.
Anyway, my question is, what can i use to replace this way of showing images?
I am guessing something with Directx/OpenGL or something?
Sadly i haven´t found a way to even display an image with that, though then again, i have a hard time understanding it.
I am open for suggestions and examples.
EDIT:
I am thinking, maybe to use WPF to just show the image.
But i don´t know if i can change the background image from a winform, so if it´s possible then i am all ear.
Thanks

Disable to download image from canvas

I added image to canvas element, but visitor than can save that image to local comp.
Is there any way to disable that option? I don't know, putting some transparent image over?
Thx
So i thought this can help you just disable rightclicks:
$('#canvas').bind("contextmenu",function(e){
return false;
});
None of this (not even image slicing) stops a user from simply copying the screen on to the clipboard and pasting it into MSpaint or any other image utility, and saving the result. Its trivial to do; And a transparency image is no impediment to this.
The only effective options that I know of are (as was said), watermarking or low quality.
*Avoid 1 pixel wide lines or dot watermarks that can be removed easily with a Photoshop filter.
~If its commercial... You could have a pay-wall, and steganographically embed the purchaser's name and or information into the image (or preview), such that if it does get used without permission, at least you know who did it.
Basicly: if your image is loaded by the Browser you can never protect the user to download it, because if the browser knows where to find the image, the user can find this out as well. So all this download protection only works for users not familiar with computers and the internet and nowadays i think most people are able to download such an image if they really want to.
If you want to prevent users to use your images for their work, you can use images with watermarks or in a lower resolution otherwise can you tell what reason do you have to prevent users from downloading?
I found this question in review of an HTML5 captcha alternative I'm developing. My goal is not to "prevent" users from downloading the image as much as blocking OCR on the image capture. To prevent it, I added a onclick event to the canvas object that resets the canvas element on click. The user can "download" it, but it no longer is the original code presented.

Preventing web images from being taken

I've been looking around to see if there exists a good way to prevent viewers from using their right click options to download images that I upload to my website.
I know that people can look at the image url in the page source, and was wondering if you suggest a way to prevent them being taken, by disabling the save image option.
This is an unsolvable problem.
As long as you actually want people to see the images, you cannot prevent them from saving them via a number of methods (e.g. screenshots). All measures you might think of will just annoy your users, without actually preventing them from doing what they want anyway. Also consider that the people watching those images will have some interest in them (otherwise they would not watch them in the first place), so there we already have a motive for them to keep a copy.
The only way to reliably prevent people from saving the images is to never let them copy them onto their computers in the first place (and remember: showing something on another computer always entails making a copy).
One solution could be to invite people into a place where they can view the image on a screen which you control, and not let them take any pictures. Think of modern cinemas where security people with night sights watch the spectators and pull out those who might have been handling any camera like device.
If you want to make it even more difficult, do not use an IMG tag. Instead, define the image using CSS with the property 'background-image'. To make it even more tricky, define that property at runtime using JavaScript that was placed on the page using base64 encoding.
You can try this...
onload=function(){
document.oncontextmenu=function(){return false;}
}
This will disallow the operation of the context (right mouse button click) menu...
If a user knows what they're doing they can get around this, though.
I suggest not doing this. It's annoying and you're not actually protecting yourself.
If you must, jQuery makes it pretty easy to disable the right click menu:
$(document).ready(function(){
$('img').bind("contextmenu",function(){
return false;
});
});
Just make your images so ugly no one would want to take them.
Seriously, what are you worried about?
If you use the Microsoft Ajax Seadragon Deep Zoom viewer for you images then you can present your images as lots of overlapping tiles - a real pain to stick back together, difficulty depends on images size, but for hi-resolution images it makes 'printscreen' the only option for those wanting to steal stuff.
Incidentally the contextmenu thing works on divs better than images (things bubble) and you don't have to offend people by doing no click on the whole document.
To do it by class, e.g. with Prototype:
$$('.your-image-container-class').each(function(s) {s.oncontextmenu=function(){return false;}});

How to easily crop the same image multiple times

I have a set of really big images out of which I need to crop little snippets. These snippets are all exactly the same size but don't follow a strict pattern so I can't do this programatically.
Ideally I would like to open up one of the big files and be able to point and click on say, the top left corner of a snippet and have that automatically be saved to disk without even having to enter a file name, and then continue on with the rest. (Of course this would be the ideal way which I know is probably way off the real possible way!).
I started doing this in Photoshop CS4 but cropping a snippet, saving, undoing (to get to the full image), and starting over again takes way too long.
Maybe someone has a better way to do this in photoshop or in some other software.
Thanks for reading!
Instead of cropping and undoing, you could:
make (or resize) a selection
copy the selection to a new image
save the image
close the image
You might need to split it into two actions, I don't know enough about programming Photoshop.
Thank you everyone for your input.
I ended up doing this with a suggestion a colleague of mine came up with. It consisted of creating a Photoshop "slice" over the first region I wanted to crop and then cloning that region over the rest of the other sections. After that, using Save For Web (and ofter hitting Continue when PS complained about how that image was way beyond Save For Web's capabilities) I could save all images at once.
This was the fastest and easiest method I could find. Until then I was going with Mark Ransom's method.

What ways do you use to protect copy righted images?

What ways do you use to protect copy righted images in your website?
Really the only way to protect images is to put huge watermarks on them, or only show them smaller than their original size. This is assuming you're displaying art or something else of that nature. All the tricks of disabling right click or using a css background or making a script output the image data only slow people down. If you can see something, you can save it. All it takes is a screenshot.
Not sure you can whilst people have the ability to hit "alt-print screen". You can prevent right clicking so they can't directly download the image and you can protect your folders so that you can't directly navigate to the image but that's about it really.
alt-print screen is your biggest permanent problem.
Put them behind a protected area and only give access to people you trust. If it's of the public portion on the site, you can't protect them. You can just inform people that the images are copyrighted, but the users can grab them at will.
i don't know any method that you works 100% however,
don't upload high quality images,it means that people can get but hesitate to use your images by trying these circumvented methods:
no right-click script
Shrink wrapping letting the thief download something other than original one.
Watermarking
Using Flash makes harder to get it

Resources