I'm suggesting some other approaches not listed above. These approaches are more difficult than CSS styles, but they help to protect images from downloading using browser image downloader extensions as well. These extensions list all images available on a webpage and allow user to download all of them at once.
1. Convert all <img>
tags to <canvas>
tags.
This action removes the "Save Image" menu item on both desktop and mobile devices even if browser doesn't handle the oncontextmenu
event.
2. Disrupt toDataURL
and toBlob
functions to thwart image downloader extensions.
There are three functions that allow saving of a <canvas>
element content: toBlob, toDataURL and getContext. This code will disable all these functions:
HTMLCanvasElement.prototype.toBlob = function () { }
HTMLCanvasElement.prototype.toDataURL = function () { }
HTMLCanvasElement.prototype.getContext = function () { }
Disable these functions only if your JS code does NOT depend on them and none of your JS dependencies use these functions. If your JS code depends on these functions, you may store original functions before modifying the HTMLCanvasElement.prototype. For example,
HTMLCanvasElement.prototype.realToBlob = HTMLCanvasElement.prototype.toBlob;
HTMLCanvasElement.prototype.toBlob = function () { };
// ... when you need toBlob, call the realToBlob functions
await myCanvas.realToBlob()
Complete solution
There is a script on GitHub doing that for you: https://github.com/SjomaNikitin/image-download-blocker
You can use it by including to your HTML like that:
<script src="https://raw.githubusercontent.com/SjomaNikitin/image-download-blocker/main/image-download-blocker.js" async></script>
I recommend downloading the image-download-blocker.js and hosting it locally though.
The script will wait for all images to load and replaces them with canvas tags preserving all CSS styles applied to them.
You may need to modify the code if your website uses lazy-loading images, activated on window scroll or some other event.
png
over it or not, it's not going to help if someone canprint screen
;-)