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.

  1. By using IMG tag
  2. 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.

Many websites have disabled right click feature for preventing content theft.But while disabling the JavaScript in browser setting, content can be copied 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? 😝 😝
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.

In this <canvas> element, we can draw the 2D image using JavaScript.

Now while inspecting the element one can’t able to get the URL of the image.. 😆.But now user can download the image by right click on the canvas,we can disable the right click feature using JavaScript.

If the user disables JavaScript in the browser then the image will not displayed… 😤 Now the images is prevented from the download. 😌

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…

For android,

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. 👍 🙏 🙏