Awesome Open Source
Awesome Open Source


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


MIT @hustcc

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (67,386
canvas (349
mask (45
alibaba (37
watermark (26
water (14

Find Open Source By Browsing 7,000 Topics Across 59 Categories