A Javascript library that discourages and prevents image theft/download by preventing client ability to retrieve the image.

Related tags

Learning resource ProtectImage.js
Overview

ProtectImage.js

ProtectImage.js

ProtectImage.js is a Javascript library that helps prevent image theft by disabling traditional user interactions to download/copy images. This is useful for copyrighted images.

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.

ProtectImage.js requires 3 steps - that's it

Step 1: Import ProtectImage.js

Add the following to the <head> tag of your page:

<script src="https://cdn.jsdelivr.net/gh/ColonelParrot/[email protected]/src/ProtectImage.min.js"></script>

Step 2: Add the protected attribute to images you would like to protect

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

Step 3: Initialize ProtectImageJS

Option A: ProtectImageJS.getLabelledImages() (if you used the protected attribute)

In Javascript, use:

ProtectImageJS.protect(ProtectImageJS.getLabelledImages())

ProtectImageJS.getLabelledImages() finds all images with the protected attribute.

Option B: Retrieve all image tags manually

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!

See the live demo on JSFiddle here (https://jsfiddle.net/ColonelParrot/g4qvtLer/)

You might also like...

Competidaily Generator lambda function to retrieve a random theme from our database.

Competidaily Generator backend - GET RANDOM THEME This repo contains the GET requisition used as a lambda function to retrieve a random theme from the

Dec 17, 2022

Download Notion pages as markdown and image files, preserving hierarchy and enabling workflow properties. Works with Docusaurus.

Download Notion pages as markdown and image files, preserving hierarchy and enabling workflow properties. Works with Docusaurus.

notion-pull notion-pull lets you use Notion as your editor for markdown-based static site generators like Docusaurus. Using Notion instead of raw mark

Jan 7, 2023

Todo List is a simple web-based application that gives users the ability to organize their work and life daily tasks. Built with JavaScript, HTML/CSS.

Javascript Project Todo List Using Javascript to create a simple Todo List project. Populating the todo list and then removing from the list. Built Wi

Sep 28, 2022

Social-Media-Dashboard - RESPONSIVE Dashboard for social media created with JS, HTML and CSS and with the ability to switch between DARK THEME and LIGHT THEME

Social-Media-Dashboard - RESPONSIVE Dashboard for social media created with JS, HTML and CSS and with the ability to switch between DARK THEME and LIGHT THEME

Social Media Dashboard Projeto feito com base no desafio do site Front End Mento

Feb 3, 2022

A plugin for Strapi that provides the ability to easily schedule publishing and unpublishing of any content type

A plugin for Strapi that provides the ability to easily schedule publishing and unpublishing of any content type

strapi-plugin-publisher A plugin for Strapi that provides the ability to easily schedule publishing and unpublishing of any content type. Requirements

Dec 7, 2022

Landscape Generator is An open Source web application that generates landscape drawings randomly, then gives you the ability to edit it and export it as SVG or PNG.

Landscape Generator is An open Source web application that generates landscape drawings randomly, then gives you the ability to edit it and export it as SVG or PNG.

Landscape Generator ## About Landscape Generator is An open Source web application that generates landscape drawings randomly, then gives you the abil

Apr 15, 2022

Obsidian jTab adds the ability to show guitar chords and tabs directly in your notes.

Obsidian jTab adds the ability to show guitar chords and tabs directly in your notes.

Obsidian jTab Guide Obsidian jTab adds the ability to show guitar chords and tabs directly in your notes. It uses the jTab library to render the chord

Dec 25, 2022

A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebWorker like neither of those.

Amuchina A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebW

Sep 17, 2022

A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email.

A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email.

Strapi PasswordLess Plugin A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email. A pl

Dec 12, 2022
Comments
  • Does not work for me

    Does not work for me

    Hey,

    Great idea and great library. I tested in a single html file and it worked good. So i decied to put it on my production site. For some reason it doesn't want to do anything. I tested and the file and the init() are firing.

    You can check it live:

    https://www.diablo-2.net/

    There is an image "world-map-act-1.png" on the front page. Any idea why it's not doing the canvasing? It has the protected attr, the script is loaded (renamed to protect.min.js) and the

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

    is in a local file called inline.js which is also loading properly.

    Any ideas?

    opened by Djongov 1
  • Is it possible to place the canvas and image at the same location

    Is it possible to place the canvas and image at the same location

    Hello,

    It's me again :D i managed to play with where i place the script and where i call the function and i managed to make it work! So i have an improvement idea for you since i really really like your script.

    I am using a lot of tooltips on my images. For tooltips i use bootstrap (popper) tooltips. So what happens when i want to protect such an image i have two things happening:

    1. Some images are getting the canvas and beneath the image i get a square of the unloaded image and the tooltip is there
    2. Some images are not getting the above and the tooltip is nowhere to be seen

    So i was thinking that if you manage to make the script put the image not after the canvas but on top, probably by using absolute positioning and z-index to put the image on top of the canvas, people with tooltips on mouseover might still benefit from the script!

    enhancement 
    opened by Djongov 1
Releases(v1.2)
Owner
null
GitHub
A Javascript library to export svg charts from the DOM and download them as an SVG file, PDF, or raster image (JPEG, PNG) format. Can be done all in client-side.

svg-exportJS An easy-to-use client-side Javascript library to export SVG graphics from web pages and download them as an SVG file, PDF, or raster imag

null 23 Oct 5, 2022
Dual ownership for NFTs, preventing rugs when collection metadata/royalties are changed

Multisig Ownable Opensea only allows EOAs to make changes to collections, which makes it impossible to use multisigs to secure NFT contracts since whe

Tubby Cats 28 Nov 24, 2022
App that receives data from a microcontroller that is set up at your electricity meter, which at certain intervals will send an image to be processed, this then gets sent to a Python instance which will get the data read from the image. That data gets sent back and will be saved to the account this meter belongs to. This gives you the ability to track your currently analog meter in a digtal environment.

Usage App Server About this project App that receives data from a microcontroller that is set up at your electricity meter, which at certain intervals

null 7 Dec 20, 2022
LiveTabs is a Javascript library that allows you to create and manage tabs on the fly. This library gives the ability to your application to act like browser tabs, making dynamic tabs.

LiveTabs Table of content Description Goals Technologies Setup Description LiveTabs is a Javascript library that allows you to create and manage tabs

Hossein Khalili 3 May 3, 2022
A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

2FA-Solver A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes. It can be used as an offline web page b

Yuthan K 8 Dec 7, 2022
An event-driven architecture wrapper for Wechaty that applies the CQS principle by using separate Query and Command messages to retrieve and modify the bot state, respectively.

CQRS Wechaty An event-driven architecture wrapper for Wechaty that applies the CQS principle by using separate Query and Command messages to retrieve

Wechaty 3 Mar 23, 2022
This project is a web app that uses the TVmaze API to retrieve data and display a list of items on the screen.

This project is a web app that uses the TVmaze API to retrieve data and display a list of items on the screen. It also enables people to like and comment on the broadcast. JavaScript, API, Bootstrap, HTML, and CSS3 were used to create this site.

Mihreteab Misganaw 2 Jan 10, 2022
Angular 14 Firebase CRUD with Realtime Database - AngularFireDatabase Object and List example: create, retrieve, update, delete

Angular 14 Firebase CRUD example with Realtime DataBase | AngularFireDatabase Build Angular 14 CRUD example with Firebase Realtime Database that uses

null 7 Dec 26, 2022
Retrieve paper citatation data from doi.org and Semantic Scholar.

citation-query Retrieve paper citatation data from doi.org and Semantic Scholar. Install Requires at least Node.js v14.14.0. npm install @uwdata/citat

UW Interactive Data Lab 6 Sep 30, 2022
Simple Rest API to retrieve medium stats of a user's stories.

Advanced Medium API Contents Overview API Details Medium feed in JSON Medium Advanced Data Medium Customized Data Medium Customized Advanced Data Miss

Sathananthan Sabesan 5 Jun 5, 2022