alimask水印圖片 JavaScript 生成庫
alimask 是一個(gè)使用 canvas 生成類似阿里巴巴內(nèi)部網(wǎng)站水印圖片的 JavaScript 庫。Online demo here.
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
評(píng)論
圖片
表情