Prevent image download in websites
In this article we are going to see how to detect image download and a simplest way to prevent image download.
Whenever a content uploaded in web it can be viewed by all.All can copy the contents and use it.It may be helpful in some scenario.But consider profile picture in social networking site,there is no need for downloading images. But now it can be downloaded easy. Lets see how an images are displayed so far and which can be used to hide image URL.
How to display image in website?? 😬 😬
There are several ways to display image in website.
- By using IMG tag
- By using as background image
1.By using IMG tag
Traditional way is by using img tag in HTML..In this method user can download the image just by a click on the image.
2.By using background image
To overcome the issue in above method,we can set the image as the background of an element by using background image property in css
But both of above methods shows image URL in the HTML…In this era, we all know how to inspect an element.While inspecting the particular container or image tag we can get the image URL and we can download the image easily.
Facebook has recently introduced a feature for protecting the profile picture against download but it too contain many issues 😢. User is not allowed to download profile picture from UI, but user has some other privileges for inspecting the element and get the absolute image URL. If we copy the image URL we can get the image in high resolution. 😛
😠 😡 Is it even possible to prevent??
Yes we can..By using canvas in HTML5
What is canvas? 😝 😝
Some may think that one can take screenshot and save the image..Yeah, it’s true we can’t prevent it as it belongs to system feature 😢 but we can detect whether our content is copied.
In the case of Apple keyboard..we can detect screenshot by pressing Cmd + 3 or Cmd +4 and for other keyboard there are various combinations with print screen key.
In case of desktop we can use the following code…
ACTION_MEDIA_SCANNER_SCAN_FILE action can be used to check screenshot is taken from that app.
When the screenshot action is detected user will be notified. 👍 🙏 🙏