React-img-to-canvas-lib NPM

About the package

With this npm package, conversion of img HTML elements to canvas HTML elements based on a valid URL is performed. It is useful if you want to add some security to your images in the browser. If malicious users open DevTools and try to inspect the DOM tree of the product, they will just see canvas elements and they will not see the 'src' attribute that typical images have. Also, canvas elements cannot be detected by image downloader browser extensions. This is not a foolproof method and determined users can still steal the images with enough technical knowledge.

Example usage

import { CanvasImage } from "react-img-to-canvas-lib";

const ExampleComponent = () => {
  return <CanvasImage
            id="someId"
            width={300}
            height={300}
            image="https://th.bing.com/th?id=OSK.HERO4Ks90PlPZICxD-3xT1jNbYavN8Tdx-myG2eKJSgkiMU&w=472&h=280&c=1&rs=2&o=6&dpr=1.3&pid=SANGAM"
            style={{ display: "block", margin: "0 auto" }}
          />
}

export default ExampleComponent;