diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a2d6cad
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+.project
+.settings
+
+node_modules/*
+
+npm-debug.log
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..df5170e
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+ - "6"
+ - "4"
+ - "0.12"
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..19cb517
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Hust.cc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..6f736a1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,63 @@
+# alimask
+
+> **alimask** 是一个使用 canvas 生成类似阿里巴巴内部网站水印图片的 JavaScript 库。Online demo [here](http://git.hust.cc/alimask/).
+
+
+
+[](https://travis-ci.org/hustcc/alimask) [](https://www.npmjs.com/package/alimask) [](https://www.npmjs.com/package/alimask) [](https://www.npmjs.com/package/alimask)
+
+
+# 1. Install
+
+> **npm install alimask**
+
+Then import it.
+
+```js
+
+// or
+var alimask = require('alimask');
+// or
+import alimask from 'alimask';
+```
+
+Then use **alimask(text, options)** API.
+
+```js
+alimask('王小为(小为) 888888');
+
+alimask('王小为(小为) 888888', { color: 'green' });
+```
+
+
+# 2. API
+
+The unique API is: **alimask(ext, options)**.
+
+width: 250,
+ height: 80,
+ color: '#ebebeb',
+ fillColor: 'white',
+ font: '10px Arial'
+
+ - **width** (Number): default is `250`.
+ - **height** (Number): default is `80`
+ - **color** (String): the text color, default is `#ebebeb`.
+ - **fillColor** (String): the background color, default is `white`.
+ - **font** (String): the text font style, default is `10px Arial`.
+
+The api return **the base64 string of water mask image**.
+
+
+# 3. Build & Test
+
+> npm install
+
+> npm run build
+
+> npm test
+
+
+# 4. LICENSE
+
+MIT @[hustcc](https://github.com/hustcc)
diff --git a/alimask.png b/alimask.png
new file mode 100644
index 0000000..259c691
Binary files /dev/null and b/alimask.png differ
diff --git a/dist/alimask.js b/dist/alimask.js
new file mode 100644
index 0000000..18e8ede
--- /dev/null
+++ b/dist/alimask.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2017 hustcc
+ * License: MIT
+ * Version: v1.0.0
+ * GitHub: https://github.com/hustcc/alimask
+**/
+
+/* jshint expr: true */
+!function (root, factory) {
+ if (typeof module === 'object' && module.exports) {
+ module.exports = factory(root); // nodejs support
+ module.exports['default'] = module.exports; // es6 support
+ }
+ else
+ root.alimask = factory(root);
+}(typeof window !== 'undefined' ? window : this, function () {
+ var canvas, ctx;
+ function mergeOptions(options) {
+ options = Object.assign({
+ width: 250,
+ height: 80,
+ color: '#ebebeb',
+ fillColor: 'white',
+ font: '10px Arial'
+ }, options);
+ return options;
+ }
+ /**
+ * alimask( text, options ) -> string
+ * - text (String): this text on water mask.
+ * - options(Object): water mask options.
+ * With keys:
+ {
+ width: 250,
+ height: 80,
+ color: '#ebebeb',
+ fillColor: 'white',
+ font: '10px Arial'
+ }
+ *
+ * return base64 of background water mask image.
+ **/
+ return function(text, options) {
+ if (!canvas || !ctx) {
+ // if not exist, then initial
+ canvas = document.createElement('canvas');
+ ctx = canvas.getContext('2d');
+ }
+ options = mergeOptions(options);
+ var width = options.width,
+ height = options.height;
+
+ canvas.width = width;
+ canvas.height = height;
+
+ ctx.clearRect(0, 0, width, height); // clear the canvas
+
+ ctx.fillStyle = options.fillColor;
+ ctx.fillRect(0, 0, width, height);
+
+ ctx.fillStyle = options.color;
+ ctx.font = options.font;
+
+ ctx.translate(10, height - 10); // margin: 10
+ ctx.rotate(- Math.PI / 12); // 15 degree
+ ctx.fillText(text, 0, 0);
+ return canvas.toDataURL();
+ };
+});
\ No newline at end of file
diff --git a/dist/alimask.min.js b/dist/alimask.min.js
new file mode 100644
index 0000000..014cc9b
--- /dev/null
+++ b/dist/alimask.min.js
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2017 hustcc
+ * License: MIT
+ * Version: v1.0.0
+ * GitHub: https://github.com/hustcc/alimask
+**/
+!function(t,e){"object"==typeof module&&module.exports?(module.exports=e(),module.exports.default=module.exports):t.alimask=e()}("undefined"!=typeof window?window:this,function(){function t(t){return t=Object.assign({width:250,height:80,color:"#ebebeb",fillColor:"white",font:"10px Arial"},t)}var e,o;return function(l,i){e&&o||(e=document.createElement("canvas"),o=e.getContext("2d")),i=t(i);var n=i.width,r=i.height;return e.width=n,e.height=r,o.clearRect(0,0,n,r),o.fillStyle=i.fillColor,o.fillRect(0,0,n,r),o.fillStyle=i.color,o.font=i.font,o.translate(10,r-10),o.rotate(-Math.PI/12),o.fillText(l,0,0),e.toDataURL()}});
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..7785226
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,15 @@
+const gulp = require('gulp');
+const injectVersion = require('gulp-inject-version');
+const uglify = require('gulp-uglify');
+const rename = require("gulp-rename");
+
+gulp.task('build', function() {
+ gulp.src('src/alimask.js')
+ .pipe(injectVersion())
+ .pipe(gulp.dest('dist/'))
+ .pipe(uglify({
+ preserveComments: 'license'
+ })) //uglify
+ .pipe(rename("alimask.min.js"))
+ .pipe(gulp.dest('dist/'))
+});
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cd2747f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,70 @@
+
+
+
+
+ **alimask** is a simple library to generate water mask with canvas used in alibaba / antfin.
+
+
+
+
+
+ alimask
+
+ Project alimask is a simple library to generate water mask with canvas used in alibaba / antfin. 用于生成阿里内部网站水印的 JavaScript 库。
+
+
+
+
+
+
+
+ Install
+
+npm install alimask
+ Then import it.
+
+// import library use script tag.
+<script type="text/javascript" src="dist/alimask.min.js"></script>
+
+// or
+var alimask = require('alimask');
+
+// or
+import alimask from 'alimask';
+
+
+ Usage
+
+var base64 = alimask('王小为(小为) 888888', {});
+
+
+
+
+ The code of alimask hosted on Github, click here. Welcome to issue or pull request.
+
+
+
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..ced8dc2
--- /dev/null
+++ b/package.json
@@ -0,0 +1,44 @@
+{
+ "name": "alimask",
+ "officialName": "alimask",
+ "version": "1.0.0",
+ "summary": "alimask is a simple library to generate water mask used in alibaba / antfin.",
+ "description": "alibaba water mask background.",
+ "author": {
+ "name": "hustcc",
+ "url": "https://github.com/hustcc"
+ },
+ "license": "MIT",
+ "keywords": [
+ "alimask",
+ "canvas",
+ "javascript",
+ "mask",
+ "water mask",
+ "background",
+ "antfin",
+ "alibaba"
+ ],
+ "main": "dist/alimask.min.js",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/hustcc/alimask"
+ },
+ "bugs": {
+ "url": "https://github.com/hustcc/alimask/issues"
+ },
+ "devDependencies": {
+ "gulp": "^3.9.1",
+ "jshint": "^2.9.4",
+ "gulp-uglify": "^2.1.2",
+ "gulp-rename": "^1.2.2",
+ "gulp-inject-version": "^1.0.1"
+ },
+ "scripts": {
+ "lint": "jshint src/alimask.js",
+ "test": "npm run lint && npm run build",
+ "build": "gulp build"
+ },
+ "dependencies": {
+ }
+}
\ No newline at end of file
diff --git a/src/alimask.js b/src/alimask.js
new file mode 100644
index 0000000..af6e641
--- /dev/null
+++ b/src/alimask.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2017 hustcc
+ * License: MIT
+ * Version: %%GULP_INJECT_VERSION%%
+ * GitHub: https://github.com/hustcc/alimask
+**/
+
+/* jshint expr: true */
+!function (root, factory) {
+ if (typeof module === 'object' && module.exports) {
+ module.exports = factory(root); // nodejs support
+ module.exports['default'] = module.exports; // es6 support
+ }
+ else
+ root.alimask = factory(root);
+}(typeof window !== 'undefined' ? window : this, function () {
+ var canvas, ctx;
+ function mergeOptions(options) {
+ options = Object.assign({
+ width: 250,
+ height: 80,
+ color: '#ebebeb',
+ fillColor: 'white',
+ font: '10px Arial'
+ }, options);
+ return options;
+ }
+ /**
+ * alimask( text, options ) -> string
+ * - text (String): this text on water mask.
+ * - options(Object): water mask options.
+ * With keys:
+ {
+ width: 250,
+ height: 80,
+ color: '#ebebeb',
+ fillColor: 'white',
+ font: '10px Arial'
+ }
+ *
+ * return base64 of background water mask image.
+ **/
+ return function(text, options) {
+ if (!canvas || !ctx) {
+ // if not exist, then initial
+ canvas = document.createElement('canvas');
+ ctx = canvas.getContext('2d');
+ }
+ options = mergeOptions(options);
+ var width = options.width,
+ height = options.height;
+
+ canvas.width = width;
+ canvas.height = height;
+
+ ctx.clearRect(0, 0, width, height); // clear the canvas
+
+ ctx.fillStyle = options.fillColor;
+ ctx.fillRect(0, 0, width, height);
+
+ ctx.fillStyle = options.color;
+ ctx.font = options.font;
+
+ ctx.translate(10, height - 10); // margin: 10
+ ctx.rotate(- Math.PI / 12); // 15 degree
+ ctx.fillText(text, 0, 0);
+ return canvas.toDataURL();
+ };
+});
\ No newline at end of file