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!