Skip to content

Commit

Permalink
v0.2
Browse files Browse the repository at this point in the history 
Format code, added comment, updated README, updated demo, added script
min version.
  • Loading branch information
@baivong
baivong committed Jul 11, 2015
1 parent 2bd447e commit 35e9e96
Show file tree
Hide file tree
Showing 9 changed files with 315 additions and 223 deletions.
3 changes: 3 additions & 0 deletions .gitignore
View file
Expand Up @@ -41,3 +41,6 @@ $RECYCLE.BIN/
Network Trash Folder
Temporary Items
.apdisk

# Files backup
*.bak
184 changes: 170 additions & 14 deletions README.md
View file
@@ -1,21 +1,177 @@
# Watermark Plugin for jQuery
Add watermark on images.
jQuery plugin Watermark
=======================

How to Use?
-----------
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.

Watermark depends on jQuery. Include them both in end of your HTML code:
Vì plugin này sử dụng HTML5 và Javascript nên nó sẽ hoạt động mà không cần đến một máy chủ để xử lý ảnh, vấn đề băng thông không còn là điểu bạn cần lo lắng.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.watermark.js" type="text/javascript"></script>
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, ...

then in your code do:
Tính năng
---------

$(function() {
$(SELECTOR).watermark(OPTIONS);
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

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"
```

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:

```html
<!-- jQuery 1.5+ -->
<script src="jquery.js" type="text/javascript"></script>
<!-- jQuery plugin Watermark -->
<script src="jquery.watermark.js" type="text/javascript"></script>
```

Áp dụng phương thức watermark lên các ảnh bạn cần:

```js
$(function() {
$(SELECTOR).watermark(OPTIONS);
});
```

### Tùy chọn

| Name | Type | Default | Description |
|--------------|:--------:|:------------------------------------:|----------------------------------------------------------------------------|
| path | String | 'watermark.png' | Đường dẫn chứa ảnh dùng làm watermark, có thể sử dụng ảnh base64. |
| text | String | '' | Văn bản dùng làm watermark. |
| textWidth | Number | 130 | Độ dài khung viền bao quanh văn bản, đơn vị: px. |
| 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). |
| 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'. |
| outputHeight | Number | 'auto' | Chiều cao ảnh sau khi gắn watermark, đơn vị: px hoặc để 'auto'. |
| outputType | String | 'jpeg' | Định dạng ảnh sau khi gắn watermark, có thể chọn 3 kiểu (jpeg, png, webm). |
| done | Function | `function(imgURL){this.src=imgURL;}` | Xử lý khi tạo ảnh với watermark thành công. |
| fail | Function | `function(){}` | Xử lý khi tạo ảnh với watermark gặp lỗi. |
| always | Function | `function(){}` | Xử lý khi tiến trình xử lý kết thúc. |

**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 `webm` 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ụ
------------

### Cách dùng cơ bản

```html
<img class="img_awesome" src="img/1.jpg" alt="" />
<img class="img_awesome" src="img/2.jpg" alt="" />
<img class="img_awesome" src="img/3.jpg" alt="" />
```

```js
$(function() {
$('.img_awesome').watermark();
});
```

Với cách dùng này, bạn phải đặt ảnh `watermark.png` ở trong thư mục gốc. Bạn có thể thay thế nó bằng cách thiết lập thông số `path` một URL ảnh http hoặc dạng base64.

```js
$(function() {
$('.img_awesome').watermark({
path: 'http://i.imgur.com/LcpZHu5.png'
});
});
```

### Chọn kích thước ảnh xuất ra

Ví dụ, giới hạn chiều rộng tối đa 500px.

```js
$(function() {
$('.img_awesome').watermark({
outputWidth: 500
});
});
```

Bạn cũng có thể giới hạn theo chiều cao bằng thông số `outputHeight`. Không nên dùng cùng lúc 2 thông số kích thước, vì nó có thể làm méo hình ảnh của bạn. Chỉ nên dùng một thông số, nó sẽ điều chỉnh thông số còn lại tỉ lệ với ảnh.

### Sử dụng Text làm watermark

Kiểu dùng này được làm theo phong cách của 9GAG.

```js
$(function() {
$('.img_awesome').watermark({
text: 'GOOGLE.COM',
textWidth: 100,
gravity: 'w',
opacity: 1,
margin: 12
});
});
```

### Dùng URL ảnh

Nếu bạn sử dụng URL ảnh, và bạn chỉ muốn xuất ra URL ảnh (đã gắn watermark), bạn có thể dùng cách sau:

#### 1 ảnh

```js
$(function() {
$('<img>', {
src: 'http://i.imgur.com/AAPx3rB.jpg'
}).watermark({
done: function (imgURL) {
console.log(imgURL);
}
});
});
```

#### Nhiều ảnh

```js
$(function() {
var inputImages = ['http://i.imgur.com/AAPx3rB.jpg', 'http://i.imgur.com/39dfdPw.jpg', 'http://i.imgur.com/3OfclQY.jpg'];

var outputImages = [];

var defer = $.Deferred();
$.when(defer).done(function () {
console.log(outputImages);
});

$.each(inputImages, function (i, v) {
$('<img>', {
src: v
}).watermark({
done: function (imgURL) {
outputImages[i] = imgURL;
if (i + 1 === inputImages.length) {
defer.resolve();
}
}
});
});
});
```

Plugin Options
-------------
| Name | Type | Default | Description |
|---------------|:-------:|:-------:|------------------------------------------|
## License
[MIT License](http://opensource.org/licenses/MIT) © Zzbaivong
52 changes: 31 additions & 21 deletions demo/index.html
View file
Expand Up @@ -7,61 +7,71 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta name="title" content="jQuery plugin Watermark" />
<meta name="description" content="Add watermark on images." />
<meta name="description" content="Add watermark on images use HTML5 and Javascript." />
<meta name="robots" content="all">
<meta name="author" content="Zzbaivong">
<meta name="author" content="Zzbaivong">
<meta property="og:title" content="jQuery plugin Watermark" />
<meta property="og:description" content="Add watermark on images." />
<meta property="og:description" content="Add watermark on images use HTML5 and Javascript." />
<meta property="og:url" content="http://baivong.github.io/watermark/" />
<meta property="og:image" content="http://i.imgur.com/M3aRLA8.jpg" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<link rel="stylesheet" type="text/css" href="../dist/jquery.watermark.css" media="screen">
<!--[if !IE 7]>
<style type="text/css">
#main {display:table;height:100%}
</style>
<style type="text/css">
#main {display:table;height:100%}
</style>
<![endif]-->
</head>

<body>

<main id="main">
<div id="inner">
<h1>jQuery plugin Watermark</h1>
<div id="inner">

<header id="header">
<h1>jQuery plugin Watermark</h1>
<p>Add watermark on images use HTML5 and Javascript.</p>
</header>

<div id="content">
<p>
<img class="watermark2" src="http://i.imgur.com/qwcokrG.png" alt="Image">
<img class="watermark2" src="img/8.png" alt="Image">
</p>
<p>
<img class="watermark2" src="img/4.jpg" alt="Image">
<img class="watermark" src="img/5.png" alt="Image">
</p>
<p>
<img class="watermark2" src="img/5.png" alt="Image">
</p>
<p>
<img class="watermark" src="img/3.jpg" alt="Image">
<img class="watermark2" src="http://i.imgur.com/3OfclQY.jpg" alt="Image">
</p>
<p>
<img class="watermark" src="img/10.gif" alt="Image">
</p>
</div>

</div>

<div id="ribbon" class="ribbon right black">
<a href="https://github.com/baivong/watermark">Fork me on GitHub</a>
</div>
</main>

<footer id="footer">
<a href="https://github.com/baivong/watermark">jQuery plugin Watermark</a> is maintained by <a href="https://github.com/baivong">baivong</a>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../src/jquery.min.js"><\\/script>')</script>
<script src="../dist/jquery.watermark.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="../src/jquery.min.js"><\\/script>')

</script>
<script src="../dist/jquery.watermark.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>

<script>
var ribbon = ["black","red","blue","green","orange","purple","grey"][Math.floor(Math.random()*7)];
var ribbon = ["black", "red", "blue", "green", "orange", "purple", "grey"][Math.floor(Math.random() * 7)];
$("#ribbon").removeClass("black red blue green orange purple grey").addClass(ribbon);
</script>

</body>

</html>
</html>
36 changes: 21 additions & 15 deletions demo/script.js
View file
@@ -1,23 +1,29 @@
function demo() {
$('<img>', {
src: 'img/9.png'
}).watermark({
done: function (a) {
$('#content').prepend('<p><img src="' + a + '" /></p>');
}
var inputImages = ['http://i.imgur.com/AAPx3rB.jpg', 'http://i.imgur.com/39dfdPw.jpg'];
$.each(inputImages, function (i, v) {
$('<img>', {
src: v
}).watermark({
done: function (imgURL) {
$('#content').append('<p><img src="' + imgURL + '"></p>');
}
});
});

$('.watermark').watermark({
//outputType: 'jpeg',
text: 'DEVS.FORUMVI.COM',
gravity: 'w', // nw | n | ne | w | e | sw | s | se,
//opacity: 1,
margin: 15,
outputWidth: 500
text: 'GOOGLE.COM',
textWidth: 100,
gravity: 'w',
opacity: 1,
margin: 12
});

$('.watermark2').watermark({
outputWidth: 200
path: 'http://i.imgur.com/h0trtqE.jpg',
margin: 0,
gravity: 'nw',
opacity: 0.5,
outputWidth: 400
});
}
$(function () {
Expand Down

0 comments on commit 35e9e96

Please sign in to comment.