watermarks-js

watermarks-js

[Demo]

A JavaScript component for creating watermarks with web technologies supported above IE11+. For more details around browsers compatibilities, please check the document, "Web skills for creating watermarks".

Installation

npm i watermarks-js --save

Usage

Use the component as a CommonJS module:

const Watermarks = require('watermarks-js');
new Watermarks(document.createElement('div'), {
    contents: ['Aleen', '[e-mail]'],
    watermarks: {
        region: { // control the position of watermarks
            x: 200,
            y:200,
            width: 100,
            height: 100,
        },
        align: 'left', // text-align (left by default)
        alpha: 0.2, // font-alpha (0.2 by default)
        fontSize: 16, // font-size (16 by default)
        fontRotate: Math.PI / 4, // font-rotate (-45° by default)
        lineHeightRatio: 1.5, // line-height (1.5x by default)
    },
});

Or directly used it in browsers as a script:

<script type="text/javascript"
    src="https://github.com/aleen42/watermarks/releases/download/1.0.3/watermark.dist.js" />

new Watermarks(document.createElement('div'), {
    contents: ['Aleen', '[e-mail]'],   
});

⛽ How to contribute

Have an idea? Found a bug? See how to contribute.

📜 License

MIT © aleen42