diff --git a/README.md b/README.md index 3e920d7..5987129 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,6 @@ -jQuery plugin Watermark -======================= +# jQuery plugin Watermark -[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Flelinhtinh%2Fwatermark.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Flelinhtinh%2Fwatermark?ref=badge_shield) +![npm](https://img.shields.io/npm/v/watermark) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Flelinhtinh%2Fwatermark.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Flelinhtinh%2Fwatermark?ref=badge_shield) JQuery plugin Watermark help you seal batch of images, like a stamp tool. @@ -9,51 +8,50 @@ Because this plugin is written in HTML5 and Javascript, so it will operate witho Suitable uses for low-bandwidth web server, or web creation services, free forums without management server as Blogspot, Forumotion, ... -Demo ----- +## Demo -Features --------- +## Features -1. Using an image or text to stamp. -2. Allows you to select a position to stamp on 8 corners of the image. -3. Size and format options after the stamped image. -4. Export image to base64 type, so might instead directly into the old photos or upload server allows, for example, Imgur. +1. Using an image or text to stamp. +2. Allows you to select a position to stamp on 8 corners of the image. +3. Size and format options after the stamped image. +4. Export image to base64 type, so might instead directly into the old photos or upload server allows, for example, Imgur. -#### Defect +### Defect -1. Does not work on older browsers that don't support **HTML5**. -2. Cannot use images be limited server **CORS headers** according to the domain name. If this server in your rights management, you need to set up **Apache** as follows: +1. Does not work on older browsers that don't support **HTML5**. +2. Cannot use images be limited server **CORS headers** according to the domain name. If this server in your rights management, you need to set up **Apache** as follows: ```apache Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with" ``` -Download --------- +## Download Direct download file [watermark.zip](https://github.com/lelinhtinh/watermark/zipball/master) or [watermark.tar.gz](https://github.com/lelinhtinh/watermark/tarball/master) or use the command line: [Git](https://git-scm.com/) + ```bash -$ git clone https://github.com/lelinhtinh/watermark.git +git clone https://github.com/lelinhtinh/watermark.git ``` [Bower](http://bower.io/) + ```bash -$ bower install watermark +bower install watermark ``` [npm](http://www.npmjs.com/) + ```bash -$ npm install watermark +npm install watermark ``` -How to use ----------- +## How to use This plugin requires jQuery library from 1.5 or above, add it at the end of your HTML document as follows: @@ -74,31 +72,30 @@ $(function() { ### Options -| Name | Type | Default | Description | -|--------------|:--------:|:------------------------------------:|----------------------------------------------------------------------------| -| path | String | 'watermark.png' | Path contains images used as a watermark, can use base64 image. | -| text | String | '' | Text used as a watermark. | -| textWidth | Number | 130 | Text width of frame surrounds, units: px. | -| textSize | Number | 12 | Font size of text, units: px. | -| textColor | String | 'white' | Text color, you can use HEX or RGBA color codes. | -| textBg | String | 'rgba(0, 0, 0, 0.4)' | Background color, you can use HEX or RGBA color codes. | -| gravity | String | 'se' | The position of the watermark on the image (nw, n, ne, w, e, sw, s, se). | -| opacity | Number | 0.7 | The transparency of watermark, the value between 0 and 1. | -| margin | Number | 10 | Distance from watermark to edge of image. | -| outputWidth | Number | 'auto' | Image width after adding watermark, units: px or use 'auto'. | -| outputHeight | Number | 'auto' | Image height after adding watermark, units: px or use 'auto'. | +| Name | Type | Default | Description | +| ------------ | :------: | :----------------------------------: | -------------------------------------------------------------------------------------- | +| path | String | 'watermark.png' | Path contains images used as a watermark, can use base64 image. | +| text | String | '' | Text used as a watermark. | +| textWidth | Number | 130 | Text width of frame surrounds, units: px. | +| textSize | Number | 12 | Font size of text, units: px. | +| textColor | String | 'white' | Text color, you can use HEX or RGBA color codes. | +| textBg | String | 'rgba(0, 0, 0, 0.4)' | Background color, you can use HEX or RGBA color codes. | +| gravity | String | 'se' | The position of the watermark on the image (nw, n, ne, w, e, sw, s, se, c). | +| opacity | Number | 0.7 | The transparency of watermark, the value between 0 and 1. | +| margin | Number | 10 | Distance from watermark to edge of image. | +| outputWidth | Number | 'auto' | Image width after adding watermark, units: px or use 'auto'. | +| outputHeight | Number | 'auto' | Image height after adding watermark, units: px or use 'auto'. | | outputType | String | 'jpeg' | Image format after adding watermark, You can use one of three types (jpeg, png, webp). | -| done | Function | `function(imgURL){this.src=imgURL;}` | Called after image with watermark is created. | -| fail | Function | `function(){}` | Called after an error of images is occurring. | +| done | Function | `function(imgURL){this.src=imgURL;}` | Called after image with watermark is created. | +| fail | Function | `function(){}` | Called after an error of images is occurring. | | always | Function | `function(){}` | Called when processing finishes (done and fail). | **Note**: -1. If you use the `text` parameter, `path` parameter will be disabled. The watermark will be created from the text you type in `text` parameter. -2. In the `outputType` parameter, `webp` format only works on the Chrome browser. With other browsers, it will return the `png` format. Should avoid use `png` format, because image quality not much higher, but the output image size is quite large. +1. If you use the `text` parameter, `path` parameter will be disabled. The watermark will be created from the text you type in `text` parameter. +2. In the `outputType` parameter, `webp` format only works on the Chrome browser. With other browsers, it will return the `png` format. Should avoid use `png` format, because image quality not much higher, but the output image size is quite large. -Examples --------- +## Examples ### Basic usage @@ -202,6 +199,6 @@ $(function() { ## License -[MIT License](http://opensource.org/licenses/MIT) © [Zzbaivong](https://github.com/lelinhtinh) +[MIT License](http://opensource.org/licenses/MIT) © [lelinhtinh](https://github.com/lelinhtinh) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Flelinhtinh%2Fwatermark.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Flelinhtinh%2Fwatermark?ref=badge_large) diff --git a/READMEvi.md b/READMEvi.md index a5b17c1..d86faa2 100644 --- a/READMEvi.md +++ b/READMEvi.md @@ -1,5 +1,4 @@ -jQuery plugin Watermark -======================= +# jQuery plugin Watermark jQuery plugin Watermark giúp bạn đóng dấu ảnh hàng loạt với đầy đủ các tính năng cơ bản của một tiện ích đóng dấu ảnh. @@ -7,51 +6,50 @@ Vì plugin này sử dụng HTML5 và Javascript nên nó sẽ hoạt động m Thích hợp sử dụng cho các máy chủ web băng thông thấp, hoặc các dịch vụ tạo web, forum miễn phí mà không quản lý được máy chủ như Blogspot, Forumotion, ... -Demo ----- +## Demo -[http://baivong.github.io/watermark/](http://baivong.github.io/watermark/) + -Tính năng ---------- +## Tính năng -1. Sử dụng hình ảnh hoặc một văn bản để đóng dấu. -2. Cho phép chọn vị trí đóng dấu ở 8 góc của ảnh. -3. Tùy chọn kích thước và định dạng ảnh sau khi đóng dấu. -4. Xuất ra kiểu ảnh base64 nên có thể thay trực tiếp vào ảnh cũ hoặc tải lên máy chủ cho phép, ví dụ: Imgur. +1. Sử dụng hình ảnh hoặc một văn bản để đóng dấu. +2. Cho phép chọn vị trí đóng dấu ở 8 góc của ảnh. +3. Tùy chọn kích thước và định dạng ảnh sau khi đóng dấu. +4. Xuất ra kiểu ảnh base64 nên có thể thay trực tiếp vào ảnh cũ hoặc tải lên máy chủ cho phép, ví dụ: Imgur. -#### Nhược điểm +### Nhược điểm -1. Không hoạt động trên các trình duyệt cũ không hỗ trợ **HTML5**. -2. Không thể sử dụng hình ảnh bị máy chủ giới hạn **CORS headers** theo tên miền. Nếu đó là máy chủ bạn quản lý, bạn cần thiết lập **Apache** như sau: +1. Không hoạt động trên các trình duyệt cũ không hỗ trợ **HTML5**. +2. Không thể sử dụng hình ảnh bị máy chủ giới hạn **CORS headers** theo tên miền. Nếu đó là máy chủ bạn quản lý, bạn cần thiết lập **Apache** như sau: ```apache - Header set Access-Control-Allow-Origin "*" - Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with" +Header set Access-Control-Allow-Origin "*" +Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with" ``` -Tải xuống ---------- +## Tải xuống -Tải trực tiếp tệp [watermark.zip](https://github.com/baivong/watermark/zipball/master) hoặc [watermark.tar.gz](https://github.com/baivong/watermark/tarball/master) hoặc dùng: +Tải trực tiếp tệp [watermark.zip](https://github.com/lelinhtinh/watermark/zipball/master) hoặc [watermark.tar.gz](https://github.com/lelinhtinh/watermark/tarball/master) hoặc dùng: [Git](https://git-scm.com/) + ```bash -$ git clone https://github.com/baivong/watermark.git +git clone https://github.com/lelinhtinh/watermark.git ``` [Bower](http://bower.io/) + ```bash -$ bower install watermark +bower install watermark ``` [npm](http://www.npmjs.com/) + ```bash -$ npm install watermark +npm install watermark ``` -Hướng dẫn ---------- +## Hướng dẫn Plugin này yêu cầu thư viện jQuery từ 1.5 trở lên, thêm nó vào cuối tài liệu HTML của bạn như sau: @@ -80,7 +78,7 @@ $(function() { | textSize | Number | 12 | Kích thước của kiểu chữ, đơn vị: px. | | textColor | String | 'white' | Màu chữ, có thể dùng mã màu HEX, RGBA. | | textBg | String | 'rgba(0, 0, 0, 0.4)' | Màu nền, có thể dùng mã màu HEX, RGBA. | -| gravity | String | 'se' | Vị trí đặt watermark ở 8 góc ảnh (nw, n, ne, w, e, sw, s, se). | +| gravity | String | 'se' | Vị trí đặt watermark ở 9 góc ảnh (nw, n, ne, w, e, sw, s, se, c). | | opacity | Number | 0.7 | Độ trong suốt của watermark, nhận giá trị giữa 0 và 1. | | margin | Number | 10 | Khoảng cách watermark so với mép ảnh. | | outputWidth | Number | 'auto' | Chiều rộng ảnh sau khi gắn watermark, đơn vị: px hoặc để 'auto'. | @@ -92,11 +90,10 @@ $(function() { **Lưu ý**: -1. Nếu bạn sử dụng thông số `text` thì thông số `path` sẽ bị vô hiệu. Watermark sẽ được tạo từ văn bản bạn nhập vào thông số `text`. -2. Trong thông số `outputType`, định dạng `webp` chỉ hoạt động trên trình duyệt Chrome. Với các trình duyệt khác, nó sẽ trả về định dạng `png`. Nên hạn chế dùng định dạng `png` vì chất lượng ảnh cao hơn không nhiều, mà dung lượng ảnh xuất ra khá lớn. +1. Nếu bạn sử dụng thông số `text` thì thông số `path` sẽ bị vô hiệu. Watermark sẽ được tạo từ văn bản bạn nhập vào thông số `text`. +2. Trong thông số `outputType`, định dạng `webp` chỉ hoạt động trên trình duyệt Chrome. Với các trình duyệt khác, nó sẽ trả về định dạng `png`. Nên hạn chế dùng định dạng `png` vì chất lượng ảnh cao hơn không nhiều, mà dung lượng ảnh xuất ra khá lớn. -Một số ví dụ ------------- +## Một số ví dụ ### Cách dùng cơ bản @@ -199,4 +196,5 @@ $(function() { ``` ## License -[MIT License](http://opensource.org/licenses/MIT) © [Zzbaivong](https://github.com/baivong) \ No newline at end of file + +[MIT License](http://opensource.org/licenses/MIT) © [lelinhtinh](https://github.com/lelinhtinh) diff --git a/dist/jquery.watermark.js b/dist/jquery.watermark.js index 6ba8c66..fa6deb6 100644 --- a/dist/jquery.watermark.js +++ b/dist/jquery.watermark.js @@ -2,7 +2,7 @@ * Project: jQuery plugin Watermark * Description: Add watermark on images use HTML5 and Javascript. * Author: Zzbaivong (devs.forumvi.com) - * Version: 1.0.1 + * Version: 1.0.2 * License: MIT */ diff --git a/dist/jquery.watermark.min.js b/dist/jquery.watermark.min.js index 7eb8085..c1d224b 100644 --- a/dist/jquery.watermark.min.js +++ b/dist/jquery.watermark.min.js @@ -2,7 +2,7 @@ * Project: jQuery plugin Watermark * Description: Add watermark on images use HTML5 and Javascript. * Author: Zzbaivong (devs.forumvi.com) - * Version: 1.0.1 + * Version: 1.0.2 * License: MIT */ !function($,window,document,undefined){"use strict";var pluginName="watermark",defaults={path:"watermark.png",dataPath:!1,text:"",textWidth:130,textSize:13,textColor:"white",textBg:"rgba(0, 0, 0, 0.4)",gravity:"se",opacity:.7,margin:0,fullOverlay:!1,outputWidth:"auto",outputHeight:"auto",outputType:"jpeg",done:function(imgURL){this.src=imgURL},fail:function(){},always:function(){}};function Plugin(element,options){this.element=element,this.settings=$.extend({},defaults,options),this._defaults=defaults,this._name=pluginName,this.init()}$.extend(Plugin.prototype,{init:function(){var _this=this,ele=_this.element,set=_this.settings,actualPath=set.dataPath?$(ele).data(set.dataPath):set.path,wmData={imgurl:actualPath,type:"png",cross:!0},imageData={imgurl:ele.src,cross:!0,type:set.outputType,width:set.outputWidth,height:set.outputHeight};0===actualPath.search(/data:image\/(png|jpg|jpeg|gif);base64,/)&&(wmData.cross=!1),0===ele.src.search(/data:image\/(png|jpg|jpeg|gif);base64,/)&&(imageData.cross=!1);var defer=$.Deferred();$.when(defer).done((function(imgObj){imageData.wmObj=imgObj,_this.imgurltodata(imageData,(function(dataURL){set.done.call(ele,dataURL),set.always.call(ele,dataURL)}))})),""!==set.text&&(wmData.imgurl=_this.textwatermark(),wmData.cross=!1),_this.imgurltodata(wmData,(function(imgObj){defer.resolve(imgObj)}))},textwatermark:function(){var _this=this,set=this.settings,canvas=document.createElement("CANVAS"),ctx=canvas.getContext("2d"),w=set.textWidth,h=set.textSize+8;return canvas.width=w,canvas.height=h,ctx.fillStyle=set.textBg,ctx.fillRect(0,0,w,h),ctx.fillStyle=set.textColor,ctx.textAlign="center",ctx.font="500 "+set.textSize+"px Sans-serif",ctx.fillText(set.text,w/2,set.textSize+2),canvas.toDataURL()},imgurltodata:function(data,callback){var _this=this,set=this.settings,ele=this.element,img=new Image;data.cross&&(img.crossOrigin="Anonymous"),img.onload=function(){var canvas=document.createElement("CANVAS"),ctx=canvas.getContext("2d"),w=this.width,h=this.height,ctxH;if(data.wmObj&&("auto"!==data.width&&"auto"===data.height&&data.width0&&op<1&&(ctx.globalAlpha=set.opacity);var wmW=set.fullOverlay?w:data.wmObj.width,wmH=set.fullOverlay?h:data.wmObj.height,pos=set.margin,gLeft,gTop;switch(set.gravity){case"nw":gLeft=pos,gTop=pos;break;case"n":gLeft=w/2-wmW/2,gTop=pos;break;case"ne":gLeft=w-wmW-pos,gTop=pos;break;case"w":gLeft=pos,gTop=h/2-wmH/2;break;case"e":gLeft=w-wmW-pos,gTop=h/2-wmH/2;break;case"sw":gLeft=pos,gTop=h-wmH-pos;break;case"s":gLeft=w/2-wmW/2,gTop=h-wmH-pos;break;case"c":gLeft=w/2-wmW/2,gTop=(h-wmH)/2;break;default:gLeft=w-wmW-pos,gTop=h-wmH-pos}ctx.drawImage(data.wmObj,gLeft,gTop,wmW,wmH)}var dataURL=canvas.toDataURL("image/"+data.type);if("function"==typeof callback)if(data.wmObj)callback(dataURL);else{var wmNew=new Image;wmNew.src=dataURL,callback(wmNew)}canvas=null},img.onerror=function(){return set.fail.call(this,this.src),set.always.call(ele,this.src),!1},img.src=data.imgurl}}),$.fn.watermark=function(options){return this.each((function(){$.data(this,"plugin_watermark")||$.data(this,"plugin_watermark",new Plugin(this,options))}))}}(jQuery,window,document); \ No newline at end of file diff --git a/package.json b/package.json index 43c9d60..7ba8306 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "watermark", - "version": "1.0.1", + "version": "1.0.2", "description": "Add watermark on images use HTML5 and Javascript.", "keywords": [ "watermark", @@ -12,10 +12,10 @@ ], "repository": { "type": "git", - "url": "https://github.com/baivong/watermark.git" + "url": "https://github.com/lelinhtinh/watermark.git" }, "bugs": { - "url": "https://github.com/baivong/watermark/issues" + "url": "https://github.com/lelinhtinh/watermark/issues" }, "dependencies": { "jquery": ">=1.5" @@ -23,8 +23,8 @@ "author": { "name": "zzbaivong", "email": "lhthanh.pro@gmail.com", - "url": "https://github.com/baivong" + "url": "https://github.com/lelinhtinh" }, - "homepage": "http://baivong.github.io/watermark", + "homepage": "https://lelinhtinh.github.io/watermark", "license": "MIT" }