I want to completely protect an image, not just right click protection which can be easily thwarted.
I tried editing the graphics folder permissions in cPanel but that made the image disappear.
Is there any other way to protect an image from being stolen that is completely foolproof.
EDIT
I cannot watermark this image so I need another way.
EDIT 2
I just combined the base64 dataURL and right click protection. So I'm pretty much covered except for screenshots which I'm not that worried about. If only it was possible to keep people from taking a screenshot like using some freaky DRM tricks or something.
It can't be done. You can use a few tricks to make it more difficult, but the truth is once you sent that image over the wire, the user will be able to save it, share it, etc.
Watermark your valuable images or publish low res versions of them.
Related
Good day. I am creating a simple website that adds text to the canvas. But I want the user to upload their own custom fonts and use it in the site. How can do that? I have seen that before you can use the font you still need to be write it in css.
This may point you in the right direction...
http://www.w3schools.com/php/php_file_upload.asp
Also remember that google fonts is a large fonts database to you can direct your users to...
www.w3schools.com/js/js_htmldom_css.asp
If you mess around with this ^^^ than you may figure it out...
Remember though that many browsers allow you to turn off JavaScript...
Also there are ways to change css values with php...
The best thing to try is... assuming that the users font is in their fonts directory on their computer... you can direct the user to type in the exact name of the font and it SHOULD detect the font...
Just keep chugging on :D
I've never heard or seen that done before, even as a feature request lol.
How about maybe letting the user choose their own Google web font, that way you at least know what all the choices are.
Then you could either hardcode the font styles for a few Google web fonts, or have your app created new CSS files based on what font they choose.
Good luck!
This question already has answers here:
Preventing a visitor from saving an image from my site
(15 answers)
Closed 8 years ago.
I have a website where I display digital proofs for clients of professional photographers. I would like to include an option of 'zooming' into the full resolution version of the image, but it is absolutely imperative that it be practically impossible for the end user to reconstruct and save/print the image.
Obviously simply disabling right clicking is out, as the user could simply dig up the image in the cache. Breaking the image into tiles, then reconstructing them via javascript has merit; the user could still dig up the tiles and put them together in Photoshop, but is that practical for them? That's up for debate. I was also wandering today if the image couldn't be read, sent as a character string of pixel color values, and then constructed on the client side using an absolutely positioned element for each pixel.
But my potential solutions seem to be getting more and more ridiculously convoluted. And I'd like something that's been tested and shown to be scalable. I can't possibly be the first to deal with this problem. Is there something else out there that I don't know about? What is the standard, accepted way to do this?
As an aside, I am aware that I will want to make the image data unavailable to external http requests. I would plan to have ColdFusion read the image file on demand and stream it to the client.
Thanks!
No matter what you do, someone could always screen capture the page. Keep a watermark on the full resolution image.
With 100% reliability, no. For an image to be displayed, it has to be downloaded onto the client's browser, and therefore CAN be retrieved.
You can make it harder for them to extract the image through various techniques, but none of them make it impossible - if nothing else, they can always just make a screen capture:
slice/dice the image into multiple pices and use table-based layouts to make it appear as a single image
javascript right-click disablers
various cache headers to try and prevent client-side cacheing
CSS overlays to try and prevent right-click->save as on the image itself
display in a Flash/Java app
etc... etc...
None are 100% reliable, and are all trivial to bypass by a determined (and even slightly knowledgeable) user.
You can't, unless you sell specific hardware, even then people can put a camera in front screen and take pictures
You can water mark your images
You can actively sue who ever steals your pictures (that is in reference to how others solve this).
Nicholas,
As you pointed, there is no protection against Print Screen.
I would suggest you to implement the media protection of sites like Image Bank (http://www.gettyimages.com), but is mostly based in NOT displaying full resolution images and heavy watermarking ...
I don't think there is a practical solution to your problem (if any).
Good luck!
I want to give my clients the possibility to preview their personalized product.
In a nutshell, personalization means the user specifies some text and positions the text somewhere on an image of the product.
A great example of what I'd like to achieve is this. Select a frame size and then hit Personalize, after you select the occasion and add the text you can chose to preview the product.
The hardest thing to do here, as I see it, is to generate the image. The positioning of text will probably be made in javascript.
Do you have any recommendations?
Just as a note, using scene7 is not a possibility.
Your page does not work for FireFox Mac OS-X:
Error: s_dc is not defined
File: http://imagestr.thingsremembered.com/wcsstore/CustomB2CStorefrontAssetStoreTR/javascript/lightbox.js
Line: 427
If you really want to do this only by JavaScript you could use Canvas or SVG.
But I guess it would be way easier using PHP Perl or Flash.
This would also increase your cross browser compability.
This is a long shot but I've seen things which might make it posssible.
I have a div, which is filled with images. Album covers if you must know. And I want to allow users to download this as an image. So they could use it as something like a desktop background.
So is this possible? Get this visual representation of an element and display it as an image?
Basically you can't do that. At least crossbrowser. But if it is not critical. You can try <canvas>
check here http://www.nihilogic.dk/labs/canvas2image/
Assuming I understand the question...If you know the position of the images in the div, you could concatenate the images together server side into a single image. Then just have a button users can click on that will call the function to assemble and download this image.
From what I understood from your question you can use an
img
tag for this. The user can view the image in the browser and can save it to their hard drive.
from your description each of the image inside will be a different album cover, so combining these into a single image won't a good idea.
You could possibly do the rendering serverside. By this I mean that you could generate the HTML and kind of "screenshot" it on the server. The result would nearly always be at least slightly different from what the user sees, but depending on your requirements it might be enough.
There are various tools to do this, for example wkhtmltoimage, which is a sister project of wkhtmltopdf and can be found at https://code.google.com/p/wkhtmltopdf/
I'm showing images from other websites as thumbnails. To do this I display them in a smaller img tag so the browser does the size decrease.
The problem is that the quality of these images (which I have no control of) is diminished.
Also they look much better in FF and Safari than in IE.
Is there a way to make these images look better without caching them on my server? (e.g a javascript library that does the resize with better quality)? Any idea is highly appreciated.
IE's default image resizing algorithm is not that nice - it can be changed by tweaking a registry entry, but of course that is outside of your control.
However, apparently it can also be triggered to do a better image resize through css
img { -ms-interpolation-mode: bicubic; }
source: http://edmondcho.com/blog/2009/03/17/internet-explorer-image-resizing-tip/
A quick Google search shows that in IE7 you can fix the image quality problem:
http://devthought.com/tumble/2009/03/tip-high-quality-css-thumbnails-in-ie7/
The only way to have control is to do the resizing yourself. Various browsers will use different algorithms, some with unsharp masking, some without. The filters used after resizing control most of this. Specific CSS tagging can control this to some extent.
Javascript can't really handle this, but using Flash or similar would allow this. You would have better control of the image. However, you would lose the "imageness" as far as HTML.
One thing I didn't see mentioned by the others - you aren't really resizing the image, you are just displaying it in a smaller space. Let's say you are pulling down an extremely large image file (5MB) and displaying it at 1 x 1 - it's still 5MB!
Writing a caching solution for these images wouldn't be very difficult at all - and will save you the legal ramifications and embarrassment. If I saw your site in my log files and realized you were pulling down my images, you would be Goatse'd - hard.
If you are working with a source image and simply re-sizing on the client, there isn't going to be a good way to do this.
Now, aside from the potential legal ramifications of using other sites images you could look at a simple caching process, and do a quick re-size on the image, and keep the aspect ratio, so that the display is good. This also helps reduce the bandwidth that you are using from the other sites.