开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
alimask首页、文档和下载 - 水印图片 JavaScript 生成库 - 开源中国社区
全部项目分类
MIT
JavaScript HTML/CSS
跨平台
小薇
分享
收藏
11 人收藏
收录时间:2017-05-15
alimask 详细介绍

alimask

alimask 是一个使用 canvas 生成类似阿里巴巴内部网站水印图片的 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


大家对 alimask 的评论 (全部 2 条评论)
{{repayCom.userName}}
混乱羽翼
生成的是一张背景图,可是会被前面的内容,比如输入框、列表等东西给遮挡,起不到水印的作用了
感觉效果和阿里的不一样呀?
小薇
我看到的阿里内的水印就是使用图片背景,可以后端生成,也有前端生成。
顶部