/alimask

:mask: alimask 是一个使用 canvas 生成类似阿里巴巴内部网站水印图片的 JavaScript 库。

Primary LanguageJavaScriptMIT LicenseMIT

alimask

alimask 是一个使用 canvas 生成类似阿里巴巴内部网站水印图片的 JavaScript 库。Online demo here.

Build Status npm npm npm

1. Install

npm install alimask

Then import it.

<script type="text/javascript" src="dist/alimask.min.js"></script>
// or
var alimask = require('alimask');
// or
import alimask from 'alimask';

Then use alimask(text, options) API.

alimask('王小为(小为) 888888');

alimask('王小为(小为) 888888', { color: '#f6dcd7' });

alimask('小泥巴(小美) 888888', { alpha: 0.5 });

2. API

The unique API is: alimask(text, options).

  • text (String): required, the text in the watermark image.
  • options (Object): optional, the options of watermark, with keys below:
    • width (Number): default is 250.
    • height (Number): default is 80.
    • color (String): the text color, default is #ebebeb.
    • alpha (Float): the text alpha(0 ~ 1), default is 0.8.
    • font (String): the text font style, default is 10px Arial.

The api return the base64 string of watermark image which can be used in css background / img tag.

3. Build & Test

npm install

npm run build

npm test

4. LICENSE

MIT @hustcc