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.
Related
I have a question and i am confused what strategy i should choose to solve this.
Here is the description.
I have a gallery which is managed on user authentication.
Next I have basically a simple form which saves quotes into database.
Selecting an image from gallery it is opened in a canvas. I am using Adobe Creative SDK.
Here is the demonstration image.
Next i have to select(copy) text from database to add(paste) in text field but i have no idea how to do it.
This is the task i have to do for a client. I have never seen a similar example. This is seems unique. Please provide some suggestion on doing it.
Adobe Creative SDK's editor will not allow you to pre-populate text on an image so it's out of the question for this task. You could probably find a way to overlay text on top of the Adobe editor, but then the issue with saving the image rears its head.
If you don't need any of the other editing tools, you could simply create a canvas with the image, overlay the text and allow the user to choose the font, position the text, apply stamps, etc...
Once they're done, wire up a save button to post the field with the contents of canvas.toDataURL('image/png') and have something server-side to save it.
It will be more work than using someone else's widget, but the client will be in control of their own destiny (and have a working product which they wouldn't have before).
Keep it simple and build from there.
We are using a png/8 sprite on a client's website. He is reporting the image is appearing distorted for him and on other computers on the company.
Here's how it should look:
http://i.imgur.com/wfV7ReR.jpg
And here is the print screen the client sent us:
http://i.imgur.com/sWKDYKU.jpg
I have tried donloading and exporting it again, uploading again. The problem is: On our computers it looks fine, so it's hard to test it. Our client is viewing it in IE: 11 and Google chrome: 41.0.272.118.
Has anyone seen this type of error before?
It may be the device-pixel-ratio is better than 160dpi; that'd throw off some CSS used for spriting.
If this shows "1" for you and a different value for them, I'd dig farther on that one. You could probably test this by hitting the site with an iPhone or newer Android device; they have >1.0 pixel ratios.
http://www.devicepixelratio.com/
Edit: this would also show up across-browsers on their end, as it's tied to the hardware, and not IE11.
My bet in that case is the PNG is somehow broken.
graphicdesign.stackexchange.com might be more useful; I don't know if this is fixable in CSS. (Might be; look for hacks around image backgrounds as well.)
Looking around, if you have Photoshop, you might try saving the original image, then creating a copy and changing this setting:
Image -> Mode -> Check "RGB Color"
Alternatively, try opening the image in pixlr.com, change anything however slightly, then save and use that one.
My strong suspicion is something in the way the PNG/8 is saved (maybe the alpha channel) is the issue, not any CSS you've written. Good luck!
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;}});
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
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>