├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── alimask.png
├── dist
    ├── alimask.js
    └── alimask.min.js
├── gulpfile.js
├── index.html
├── package.json
└── src
    └── alimask.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .project
2 | .settings
3 | 
4 | node_modules/*
5 | 
6 | npm-debug.log


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |     - "6"
4 |     - "4"
5 |     - "0.12"


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017 Hust.cc
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # alimask
 2 | 
 3 | > **alimask** 是一个使用 canvas 生成类似阿里巴巴内部网站水印图片的 JavaScript 库。Online demo [here](http://git.hust.cc/alimask/).
 4 | 
 5 | ![](alimask.png)![](alimask.png)![](alimask.png)
 6 | 
 7 | [![Build Status](https://travis-ci.org/hustcc/alimask.svg?branch=master)](https://travis-ci.org/hustcc/alimask) [![npm](https://img.shields.io/npm/v/alimask.svg)](https://www.npmjs.com/package/alimask) [![npm](https://img.shields.io/npm/dt/alimask.svg)](https://www.npmjs.com/package/alimask) [![npm](https://img.shields.io/npm/l/alimask.svg)](https://www.npmjs.com/package/alimask)
 8 | 
 9 | 
10 | # 1. Install
11 | 
12 | > **npm install alimask**
13 | 
14 | Then import it.
15 | 
16 | ```js
17 | <script type="text/javascript" src="dist/alimask.min.js"></script>
18 | // or
19 | var alimask = require('alimask');
20 | // or
21 | import alimask from 'alimask';
22 | ```
23 | 
24 | Then use **alimask(text, options)** API.
25 | 
26 | ```js
27 | alimask('王小为(小为) 888888');
28 | 
29 | alimask('王小为(小为) 888888', { color: '#f6dcd7' });
30 | 
31 | alimask('小泥巴(小美) 888888', { alpha: 0.5 });
32 | ```
33 | 
34 | 
35 | # 2. API
36 | 
37 | The unique API is: **alimask(text, options)**.
38 |  
39 |  - **text** (String): required, the text in the watermark image. 
40 |  - **options** (Object): optional, the options of watermark, with keys below:
41 |    - **width** (Number): default is `250`.
42 |    - **height** (Number): default is `80`.
43 |    - **color** (String): the text color, default is `#ebebeb`.
44 |    - **alpha** (Float): the text alpha(0 ~ 1), default is `0.8`.
45 |    - **font** (String): the text font style, default is `10px Arial`.
46 | 
47 | The api return **the base64 string of watermark image** which can be used in css background / img tag.
48 | 
49 | 
50 | # 3. Build & Test
51 | 
52 | > npm install
53 | 
54 | > npm run build
55 | 
56 | > npm test
57 | 
58 | 
59 | # 4. LICENSE
60 | 
61 | MIT @[hustcc](https://github.com/hustcc)
62 | 


--------------------------------------------------------------------------------
/alimask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hustcc/alimask/16555eb43a23efa0bbd9157d22467337918e16a8/alimask.png


--------------------------------------------------------------------------------
/dist/alimask.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright (c) 2017 hustcc
 3 |  * License: MIT
 4 |  * Version: v1.0.3
 5 |  * GitHub: https://github.com/hustcc/alimask
 6 | **/
 7 | 
 8 | /* jshint expr: true */
 9 | !function (root, factory) {
10 |   if (typeof module === 'object' && module.exports) {
11 |     module.exports = factory(root); // nodejs support
12 |     module.exports['default'] = module.exports; // es6 support
13 |   }
14 |   else
15 |     root.alimask = factory(root);
16 | }(typeof window !== 'undefined' ? window : this, function () {
17 |   var canvas, ctx;
18 | 
19 |   // merge the default value
20 |   function mergeOptions(options) {
21 |     return Object.assign({
22 |       width: 250,
23 |       height: 80,
24 |       color: '#ebebeb',
25 |       alpha: 0.8,
26 |       font: '10px Arial'
27 |     }, options);
28 |   }
29 | 
30 |   /**
31 |    *  alimask( text, options ) -> string
32 |    *  - text (String): this text on water mask.
33 |    *  - options(Object): water mask options. 
34 |    *    With keys: 
35 |       { 
36 |         width: 250,
37 |         height: 80,
38 |         color: '#ebebeb',
39 |         alpha: 0.8,
40 |         font: '10px Arial'
41 |       }
42 |    *
43 |    *  return base64 of background water mask image.
44 |   **/
45 |   return function(text, options) {
46 |     if (!canvas || !ctx) {
47 |       // if not exist, then initial
48 |       if (typeof document !== 'undefined') {
49 |         canvas = document.createElement('canvas');
50 |       } else {
51 |         /*
52 |           https://github.com/Automattic/node-canvas
53 |           npm install canvas --save
54 |           node-canvas 的安装过程实在是太繁琐了，所以不放入 package.json 的 dependencies。
55 |          */
56 |         var Canvas = module.require('canvas');
57 |         canvas = new Canvas();
58 |       }
59 |       ctx = canvas && canvas.getContext && canvas.getContext('2d');
60 |       if (!canvas || !ctx) return ''; // if not exist also, then return blank.
61 |     }
62 |     options = mergeOptions(options);
63 |     var width = options.width, 
64 |       height = options.height;
65 | 
66 |     canvas.width = width;
67 |     canvas.height = height;
68 | 
69 |     ctx.clearRect(0, 0, width, height); // clear the canvas
70 |     ctx.globalAlpha = 0; // backgroud is alpha
71 | 
72 |     // ctx.fillStyle = 'white'; // no need because of alipha = 0;
73 |     ctx.fillRect(0, 0, width, height);
74 | 
75 |     ctx.globalAlpha= options.alpha; // text alpha
76 |     ctx.fillStyle = options.color;
77 |     ctx.font = options.font;
78 | 
79 |     ctx.textAlign = 'left';
80 |     ctx.textBaseline = 'bottom';
81 | 
82 |     ctx.translate(width * 0.1, height * 0.9); // margin: 10
83 |     ctx.rotate(-Math.PI / 12); // 15 degree
84 |     ctx.fillText(text, 0, 0);
85 | 
86 |     return canvas.toDataURL();
87 |   };
88 | });


--------------------------------------------------------------------------------
/dist/alimask.min.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Copyright (c) 2017 hustcc
3 |  * License: MIT
4 |  * Version: v1.0.3
5 |  * GitHub: https://github.com/hustcc/alimask
6 | **/
7 | !function(e,t){"object"==typeof module&&module.exports?(module.exports=t(),module.exports.default=module.exports):e.alimask=t()}("undefined"!=typeof window?window:this,function(){function e(e){return Object.assign({width:250,height:80,color:"#ebebeb",alpha:.8,font:"10px Arial"},e)}var t,o;return function(l,n){if(!t||!o){if("undefined"!=typeof document)t=document.createElement("canvas");else{var a=module.require("canvas");t=new a}if(o=t&&t.getContext&&t.getContext("2d"),!t||!o)return""}n=e(n);var i=n.width,r=n.height;return t.width=i,t.height=r,o.clearRect(0,0,i,r),o.globalAlpha=0,o.fillRect(0,0,i,r),o.globalAlpha=n.alpha,o.fillStyle=n.color,o.font=n.font,o.textAlign="left",o.textBaseline="bottom",o.translate(.1*i,.9*r),o.rotate(-Math.PI/12),o.fillText(l,0,0),t.toDataURL()}});


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | const gulp = require('gulp');
 2 | const injectVersion = require('gulp-inject-version');
 3 | const uglify = require('gulp-uglify');
 4 | const rename = require("gulp-rename");
 5 | 
 6 | gulp.task('build', function() {
 7 |   gulp.src('src/alimask.js')
 8 |   .pipe(injectVersion())
 9 |   .pipe(gulp.dest('dist/'))
10 |   .pipe(uglify({
11 |     preserveComments: 'license'
12 |   }))    //uglify
13 |   .pipe(rename("alimask.min.js"))
14 |   .pipe(gulp.dest('dist/'))
15 | });


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 |   <title>**alimask** is a simple library to generate water mask with canvas used in alibaba / antfin.</title>
 6 |   <meta name="keywords" content="alimask" />
 7 |   <meta name="description" content="**alimask** is a simple library to generate water mask with canvas used in alibaba / antfin." />
 8 |   <style type="text/css">
 9 |   body {
10 |     max-width: 1000px;
11 |     margin: 0 auto;
12 |     padding: 10px 20px;
13 |   }
14 |   pre {
15 |     background-color: #f6dcd7;
16 |     border-radius: 3px;
17 |     padding: 10px 15px;
18 |     white-space: pre-wrap;
19 |     word-wrap: break-word;
20 |     font-weight: bold;
21 |   }
22 |   </style>
23 | </head>
24 | <body>
25 |   <h1> alimask </h1>
26 |   <p>
27 |     Project <a href="https://github.com/hustcc/alimask">alimask</a> is a simple library to generate water mask with canvas used in alibaba / antfin. 用于生成阿里内部网站水印的 JavaScript 库。
28 |   </p>
29 | 
30 |   <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
31 |   <!-- sorry for ad -->
32 |   <ins class="adsbygoogle"
33 |        style="display:block"
34 |        data-ad-client="ca-pub-7292810486004926"
35 |        data-ad-slot="7806394673"
36 |        data-ad-format="auto"></ins>
37 |   <script>
38 |   (adsbygoogle = window.adsbygoogle || []).push({});
39 |   </script>
40 | 
41 |   <h2> Install </h2>
42 |   <pre>
43 | npm install alimask </pre>
44 |   <p> Then import it. </p>
45 |   <pre>
46 | // import library use script tag.
47 | &lt;script type="text/javascript" src="dist/alimask.min.js"&gt;&lt;/script&gt;
48 | 
49 | // or
50 | var alimask = require('alimask');
51 | 
52 | // or
53 | import alimask from 'alimask';
54 | </pre>
55 | 
56 |   <h3>Usage</h3>
57 |   <pre>
58 | var base64 = alimask('王小为(小为) 888888');
59 |   </pre>
60 |   <hr />
61 | 
62 |   <p>
63 |     The code of alimask hosted on Github, click <a href="https://github.com/hustcc/alimask">here</a>. Welcome to issue or pull request.
64 |   </p>
65 |   <script type="text/javascript" src="dist/alimask.min.js"></script>
66 |   <script type="text/javascript">
67 |     document.body.style.background = 'url(' + alimask('王小为(小为) 888888') + ')';
68 |   </script>
69 | </body>
70 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "alimask",
 3 |   "officialName": "alimask",
 4 |   "version": "1.0.3",
 5 |   "summary": "alimask is a simple library to generate water mask used in alibaba / antfin.",
 6 |   "description": "alibaba water mask background.",
 7 |   "author": {
 8 |     "name": "hustcc",
 9 |     "url": "https://github.com/hustcc"
10 |   },
11 |   "license": "MIT",
12 |   "keywords": [
13 |     "alimask",
14 |     "canvas",
15 |     "javascript",
16 |     "mask",
17 |     "watermark",
18 |     "background",
19 |     "antfin",
20 |     "alibaba"
21 |   ],
22 |   "main": "dist/alimask.min.js",
23 |   "repository": {
24 |     "type": "git",
25 |     "url": "https://github.com/hustcc/alimask"
26 |   },
27 |   "bugs": {
28 |     "url": "https://github.com/hustcc/alimask/issues"
29 |   },
30 |   "devDependencies": {
31 |     "gulp": "^3.9.1",
32 |     "jshint": "^2.9.4",
33 |     "gulp-uglify": "^2.1.2",
34 |     "gulp-rename": "^1.2.2",
35 |     "gulp-inject-version": "^1.0.1"
36 |   },
37 |   "scripts": {
38 |     "lint": "jshint src/alimask.js",
39 |     "test": "npm run lint && npm run build",
40 |     "build": "gulp build"
41 |   },
42 |   "dependencies": {
43 |   }
44 | }


--------------------------------------------------------------------------------
/src/alimask.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright (c) 2017 hustcc
 3 |  * License: MIT
 4 |  * Version: %%GULP_INJECT_VERSION%%
 5 |  * GitHub: https://github.com/hustcc/alimask
 6 | **/
 7 | 
 8 | /* jshint expr: true */
 9 | !function (root, factory) {
10 |   if (typeof module === 'object' && module.exports) {
11 |     module.exports = factory(root); // nodejs support
12 |     module.exports['default'] = module.exports; // es6 support
13 |   }
14 |   else
15 |     root.alimask = factory(root);
16 | }(typeof window !== 'undefined' ? window : this, function () {
17 |   var canvas, ctx;
18 | 
19 |   // merge the default value
20 |   function mergeOptions(options) {
21 |     return Object.assign({
22 |       width: 250,
23 |       height: 80,
24 |       color: '#ebebeb',
25 |       alpha: 0.8,
26 |       font: '10px Arial'
27 |     }, options);
28 |   }
29 | 
30 |   /**
31 |    *  alimask( text, options ) -> string
32 |    *  - text (String): this text on water mask.
33 |    *  - options(Object): water mask options. 
34 |    *    With keys: 
35 |       { 
36 |         width: 250,
37 |         height: 80,
38 |         color: '#ebebeb',
39 |         alpha: 0.8,
40 |         font: '10px Arial'
41 |       }
42 |    *
43 |    *  return base64 of background water mask image.
44 |   **/
45 |   return function(text, options) {
46 |     if (!canvas || !ctx) {
47 |       // if not exist, then initial
48 |       if (typeof document !== 'undefined') {
49 |         canvas = document.createElement('canvas');
50 |       } else {
51 |         /*
52 |           https://github.com/Automattic/node-canvas
53 |           npm install canvas --save
54 |           node-canvas 的安装过程实在是太繁琐了，所以不放入 package.json 的 dependencies。
55 |          */
56 |         var Canvas = module.require('canvas');
57 |         canvas = new Canvas();
58 |       }
59 |       ctx = canvas && canvas.getContext && canvas.getContext('2d');
60 |       if (!canvas || !ctx) return ''; // if not exist also, then return blank.
61 |     }
62 |     options = mergeOptions(options);
63 |     var width = options.width, 
64 |       height = options.height;
65 | 
66 |     canvas.width = width;
67 |     canvas.height = height;
68 | 
69 |     ctx.clearRect(0, 0, width, height); // clear the canvas
70 |     ctx.globalAlpha = 0; // backgroud is alpha
71 | 
72 |     // ctx.fillStyle = 'white'; // no need because of alipha = 0;
73 |     ctx.fillRect(0, 0, width, height);
74 | 
75 |     ctx.globalAlpha= options.alpha; // text alpha
76 |     ctx.fillStyle = options.color;
77 |     ctx.font = options.font;
78 | 
79 |     ctx.textAlign = 'left';
80 |     ctx.textBaseline = 'bottom';
81 | 
82 |     ctx.translate(width * 0.1, height * 0.9); // margin: 10
83 |     ctx.rotate(-Math.PI / 12); // 15 degree
84 |     ctx.fillText(text, 0, 0);
85 | 
86 |     return canvas.toDataURL();
87 |   };
88 | });


--------------------------------------------------------------------------------