wat

watertext

🏷 Vanilla watermarking library (ES6+rollup)

Showing:

Popularity

Downloads/wk

2

GitHub Stars

4

Maintenance

Last Commit

1yr ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

0.8KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

Watertext - text watermarking library

CircleCI

Features

  • Zero dependencies library, works with NodeJS and in the browser.
  • 1.7kb minified (481B gzipped) version.

Quickstart

  1. Install library:
npm install --save watertext
  1. Watermark regular image with awesome text:
var el = document.getElementsByTagName('img')[0];

// Version 1: callback based (watertext.core.umd.min.js)
watertext(el.src, {text: 'Awesome cat'}, function(err, src){
  el.src = src;
});
// Version 2: promise based (watertext.umd.min.js)
watertext(el.src, {text: 'Awesome cat'})
  .then(function(url){el.src = url;});
Original imageWatermarked image
orig-imagewatermarked-image

Versions

There are two main versions:

  1. Callback-based vanilla js core.
  2. Promise-based (via core-js polyfill) regular.

Depending on usage, there are 3 build options: CommonJS, ES6 module and UMD library. All build are handled by rollup. Backend specific versions (CommonJS and ES6 module) are not minified (~5 Kb) and browser specific UMD comes in minified version only (~1.7 Kb).

NameCommonJSES6 moduleUMD
Core (Callback based)watertext.core.cjs.jswatertext.core.esm.jswatertext.core.umd.min.js
Regular (Promise based)watertext.cjs.jswatertext.esm.jswatertext.umd.min.js

Development

The library is tiny and the whole source code is in index.js file. It uses ES6 syntax with AirBnB style-guide. Make sure to eslint your code and write jsdoc for every method.

Supported Browsers
npx browserslist

Deployment

Webpack builds both regular and minified versions to dist folder. It uses rollup + bublé because they are faster than webpack + buble and result into smaller build size (~30% reduction).

yarn build

Publish new version with yarn:

yarn publish

Watermarking options

All of the parameters except text are optional. By default, the watermark is placed at the bottom of the image with 10px margin.

NameTypeDefaultDescription
textstring''Watermark text.
textWidthnumberundefinedWidth of watermark in pixels. By default watermark uses 100% of the image width if positioned at the top/bottom and 100% of hight if positioned on the left/right.
textSizenumber12Watermark text size.
textFontstring'Sans-serif'Watermark text font.
textColorstring'rgb(255, 255, 255)'Watermark text color.
backgroundColorstring'rgba(0, 0, 0, 0.4)'Watermark background color. Default is gray.
positionstring'bottom'Position of watermark text, one of "top", "left", "right" or "bottom".
marginnumber10Margin from the nearest edge. Negative margin positions watermark at the opposite edge. Useful for text orientation control for "left" and "right" positioning.
dataURLArray[]Parameters of canvas.toDataURL(type, encoderOptions). Default format type is image/png. Example options: ["image/jpeg", 0.5] or ["image/webp", 0.6].

Acknowledgement

  • baivong/watermark library hugely inspired this project. While there are a lot of similarities, this library does not require jQuery to watermark images.
  • brianium/watermarkjs good multi-purpose watermarking library, inspired ES6 adoption and Webpack usage.
  • Cat image is provided by pexels.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100