we have website with slideshow control which display a set of images. Client requested to "protect" them from downloading. I know about simple ways to do this:
Disable right click
Put transparent overlay on top of the real image
Use CSS background
Use canvas
Watermarking
etc...
all of these are only for "casual" users - those ones who are not aware of Dev Tools in chrome.
Are there other ways to "protect" images? The only approach I could think of is to develop custom flash (or silverlight) plugin which will send image ID to the webserver and receive "encoded" byte stream - and decode it and display it. Am I over-complicating this? are there other ways to prevent image download?
if flash plugin + webservice approach is the right way to go - are there any ready-to-go solutions, or I should develop everything from scratch?
Thank you.
THere's no way to protect your image against being downloaded. Your users have to download it to view it. Your proprietary player will fail too if someone uses screen capture tools.
EDIT:
The best thing you can to is to make the reuse (I assume you don't want your visitors to use it elsewhere?) of the image as difficult as possible. Watermarks might be a good start to deter some people because they don't have the resource and expertise to de-watermark. Or you can embed steganography as a proof of origin so you can sue them afterward. Again, it's all about trade off between cost to do this and benefit from this.
It's impossible to prevent people from downloading your images. But, I want to offer another perspective -- you can create images that people like to view and play with but don't necessarily want to download.
Here's an example:
xkcd: Click and Drag
If the images have an intrinsic value that the client wants to protect, yet has to allow potential purchasers to view prior to purchase, then you need to minimize the value of the pre-purchase image. Only displaying thumbnails, adding visible watermarks, and otherwise distorting the image in ways that humans can easily see past, but will still see are usual here.
Then there is the issue of protecting the post-purchase images. Invisible watermarking (one example here, another here) can allow the customer to purchase and use the image as you allow, but if the image appears somewhere, used in an inappropriate manner, you can use the ID embedded invisibly (to a human) to identify just which customer violated the Terms of Use. These watermarks may even survive a degree of image manipulation and even digital photography of the image on a monitor.
If any user of the site has to be able to view the full, un-devalued image, you could add an unique ID linked to their IP address to the image as it is delivered to the slideshow control, so that each user receives a unique "copy", and you can trace misuse of an image to an IP address (and date, as many users have dynamic IPs, but ISPs keep records of IP assignments over time) for potential prosecution.
Related
We have a requirement for a web browser feature that enables the user to capture a number of images from their phone. Then review the collection of images, possibly deleting some, before finally uploading the collection of images they are satisfied with.
Delegating the image capture to the native phone feature seems easy enough, and well documented.
My question is, is it possible to also delegate the review of the collection of images to some camera feature, like the 'camera roll' feature, but specifically just with the captured images (as opposed to the users entire image collection)
Is this possible? My google-fu is failing me
cheers
I'm trying to use the PictureChooser plugin, specifically the ChoosePictureFromLibrary method, and I have a few questions.
Is it possible to show more than just .jpg? I'd like at least .png as well, though maybe other picture types too.
Is it possible not to resize chosen pictures? The maxPixelDimension parameter seems to always resize the image to that size.
Is it possible to have access to the original file name of the chosen picture?
The PictureChooser is really quite a small plugin - it really only has one small class per platform - https://github.com/MvvmCross/MvvmCross/tree/v3.1/Plugins/Cirrious/PictureChooser
Because of this, the easiest route forwards for your specialist needs is probably to "branch" this small part of the code (by repo-forking or just by "copy and paste"). You should then find it straightforward to get hold of filenames, to avoid resizing, and to add any other features you need on the platforms you need to support.
If you create features that you think others may want, then mvx would love to see them open sourced back to the community - but that's not priority 1 - instead, the most important thing is making your app awesome and shipping it.
I have been wondering how facebook load images so fast.
I am not on any projects related to my question, but I'm just really interested.
With some observation, I noticed that facebook loads a low quality picture as temporary, and shows the high quality one as soon as it is fully loaded.
this makes it seem like it loaded it so fast, but really it was just a low quality one at first.
My question is, how does facebook implement that?
When I put image on my site, it loads it from top to bottom in full quality right on.
Is this done through Javascript/Jquery ajax? or something?
is done through php?
did facebook make to versions on their end? low and high quality? and send the low quality one first?
Thanks :)
Yes! you are right, Facbook loads low quality image first then render it based on network speed. this method called "Progressive JPEGs" which is another type of JPEGs, they are rendered, as the name suggests, progressively.
First you see a low quality version of the whole image. Then, as more of the image information arrives over the network, the quality gradually improves.
From usability perspective, progressive is usually good, because the user gets feedback that something is going on. Also if you’re on a slow connection, progressive JPEG is preferable because you don’t need to wait for the whole image to arrive in order to get an idea if it is what you wanted. If not, you can click away from the page or hit the back button, without waiting for the (potentially large) high quality image.
There is controversial information in blogs and books whether progressive JPEGs are bigger or smaller than the baseline JPEGs in terms of file size.
If you use tool like Photoshop or any designing tool while saving any document in jpg or other format it will ask you 2 option one is for Baseline and another one is Progressive.
But you can achieve same on run time also if you have written any API for this to convert your baseline images to Progressive images while displaying on webpage.
From my understanding, when you click on an image from the Facebook UI, the viewer appears with the low thumbnail version (or a slightly larger version of the thumbnail) loaded. Because of browser caching, that low quality image will display very quickly.
Then in the background, they use javascript to load the higher quality image. Then using some javascript events, they can detect when the higher quality image has loaded. Once loaded, replace the lower quality version with the higher quality version of it.
So from the UI perspective, it's only Javascript. When you upload the photo, they create multiple sizes of the image to allow this effect to happen.
I have seen that google music is using one image for all the small images used in google Music website
http://music.google.com/music/sprites.png
i want to know whats the advantage of it. It would be very difficult to mark the position coordinates of small images
It reduces the number of HTTP requests that the client has to make to the server. Generally this speeds load time.
Yahoo provides a good set of guidelines for decreasing the load time of your web page. This is part of their first rule.
Setting up all of the indexes for the locations is time consuming, but it only has to be done once by the developer and then every single page load requires less HTTP requests. Specifically, in this case, 1 request rather than several dozen for all of the little images.
I am a flash developer who has worked mostly on small ActionScript projects, in particular websites, but I am dipping my toes into image manipulation with AS3. I have a project I'm working on to develop an application which would allow a user to upload their own picture into a swf, and then, using a slider, they can alter the image to make themselves look thinner or fatter. The condition is that it should require minimal user input - so ideally the most I could expect from the user would be a couple of control points identifying certain areas of the face in response to prompts e.g. 'click on the centre of the chin' and when the user clicks, the position would be stored, but this would need to be used sparingly, if at all.
So far, I have been able to use the FileReference class to handle the upload, and I am experimenting with using the DisplacementMap filter to edit certain parts of the uploaded image, but I am having serious trouble implementing this in a manner that would allow realistic deformation of the facial features in the image uploaded.
Is there anything that exists that might run along the same lines and that provides an explanation/source code I could look at to get a better idea of how to go around doing this? Or if there are any other ideas on how to manipulate and distort the image that doesn't use the DisplacementMap Filter?
Any feedback and help is greatly appreciated. Thank you for your time.
see http://sakri.net/technology/flash/flex/convolution_filter/ConvolutionFilterExplorer.html
(source code available)