From 1287f7655071751479d59aa35dc310f2f89962e8 Mon Sep 17 00:00:00 2001 From: hustcc Date: Fri, 12 May 2017 19:28:35 +0800 Subject: [PATCH] v1.0.0 --- .gitignore | 6 ++++ .travis.yml | 5 ++++ LICENSE | 21 +++++++++++++ README.md | 63 +++++++++++++++++++++++++++++++++++++++ alimask.png | Bin 0 -> 2289 bytes dist/alimask.js | 69 +++++++++++++++++++++++++++++++++++++++++++ dist/alimask.min.js | 7 +++++ gulpfile.js | 15 ++++++++++ index.html | 70 ++++++++++++++++++++++++++++++++++++++++++++ package.json | 44 ++++++++++++++++++++++++++++ src/alimask.js | 69 +++++++++++++++++++++++++++++++++++++++++++ 11 files changed, 369 insertions(+) create mode 100644 .gitignore create mode 100644 .travis.yml create mode 100644 LICENSE create mode 100644 README.md create mode 100644 alimask.png create mode 100644 dist/alimask.js create mode 100644 dist/alimask.min.js create mode 100644 gulpfile.js create mode 100644 index.html create mode 100644 package.json create mode 100644 src/alimask.js 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/). + +![](alimask.png)![](alimask.png)![](alimask.png) + +[![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) + + +# 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 0000000000000000000000000000000000000000..259c691bcb5f4959e93713ad721f5248cfa95fef GIT binary patch literal 2289 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 literal 0 HcmV?d00001 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