ProtectImage.js uses HTML5 CanvasAPI and the protected attribute in images to protect your images. It disables and prevents the client from downloading, copying and copying image addresses by porting the image into a canvas. Unlike layer-protected images, this prevents the source of the image from being visible through developer tools.
Add the following to the <head> tag of your page:
<script src="https://cdn.jsdelivr.net/gh/ColonelParrot/ProtectImage.js@v1.2/src/ProtectImage.min.js"></script>For example:
<img src="your/src" protected/>If you have a lot of images and find it tedious to add the protected attribute to every one of them, skip to Option B of Step 3
In Javascript, use:
ProtectImageJS.protect(ProtectImageJS.getLabelledImages())ProtectImageJS.getLabelledImages() finds all images with the protected attribute.
If you want to protect a custom array of images, get all elements like so:
ProtectImageJS.protect(document.querySelectorAll("img"))This will protect every single image on the page.
Note: It is recommend to wrap ProtectImageJS functions in a window.onload event to ensure the image finishes loading and styles are computed.
And you're done!