Protect Images From Theft Using The ProtectImage.js Library

Preview:

Description:

ProtectImage.js is a tiny (less than 1kb) JavaScript library that protects images on your site from theft by disabling right-click and hiding the image source in the console log.

How to use it:

1. Import the script.min.js JavaScript library into the document.

<script src="src/script.min.js"></script>

2. Add the protected attribute to images.

<img src="1.jpg" protected />

3. Initialize the library and done.

window.onload = function() {
  ProtectImageJS.init()
}

4. The library will show the image on an HTML5 canvas element instead and hide the real image path in the console log:

<canvas width="620" height="465"></canvas>
<img src="" protected="">

Changelog:

05/22/2021

• JS Update