repository·master·Indexed 41 days ago
https://github.com/lelinhtinh/watermarkA jQuery plugin (v1.0.2) that applies text or image watermarks to images client-side using HTML5 and JavaScript. It supports customizable positioning via gravity, output format control (jpeg, png, webp), and provides base64 URLs via callbacks for image exporting without a server.
You can control the dimensions of the resulting image using outputWidth or outputHeight.
Important: Do not use both parameters simultaneously as it may distort the image. If you provide only one, the plugin will adjust the other dimension to maintain the original aspect ratio.
$(function() {
$('.img_awesome').watermark({
outputWidth: 500
});
});The plugin requires jQuery 1.5 or above. Ensure jQuery is loaded before the watermark plugin in your HTML document.
To use the plugin, call .watermark(OPTIONS) on a jQuery selector.
<!-- jQuery 1.5+ -->
<script src="jquery.js" type="text/javascript"></script>
<!-- jQuery plugin Watermark -->
<script src="jquery.watermark.js" type="text/javascript"></script>$(function() {
$(SELECTOR).watermark(OPTIONS);
});$(function() {
$('.img_awesome').watermark();
});Include jQuery (1.5+) and the jquery.watermark.js file at the end of your HTML document before calling the plugin.
<!-- jQuery 1.5+ -->
<script src="jquery.js" type="text/javascript"></script>
<!-- jQuery plugin Watermark -->
<script src="jquery.watermark.js" type="text/javascript"></script>You can install the watermark plugin using npm, Bower, or by cloning the repository via Git.
npm install watermarkbower install watermarkgit clone https://github.com/lelinhtinh/watermark.gitIf you are using an image URL as a watermark and encounter errors, the server hosting that image must allow CORS. If you manage the server, configure Apache with the following headers:
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with"If you are using images from a different domain as watermarks, the server hosting those images must allow CORS (Cross-Origin Resource Sharing). If you use an Apache server, you can configure the following headers:
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with"Since the plugin processes images in the browser, it returns the watermarked image as a base64 URL via the done callback. This is useful for exporting images without a server.
$(function() {
$('<img>', {
src: 'http://i.imgur.com/AAPx3rB.jpg'
}).watermark({
done: function (imgURL) {
console.log(imgURL);
}
});
});To process multiple images, you can use a $.Deferred object to track when all images have finished processing.
$(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();
}
}
});
});
});$(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();
}
}
});
});
});To use text instead of an image, provide the text property. You can also customize the text size, background, and position using gravity.
$(function() {
$('.img_awesome').watermark({
text: 'GOOGLE.COM',
textWidth: 100,
gravity: 'w',
opacity: 1,
margin: 12
});
});When you don't want to modify existing DOM elements directly, you can create new image elements and use the done callback to retrieve the resulting base64 URL.
// Single image example
$(function() {
$('<img>', {
src: 'http://i.imgur.com/AAPx3rB.jpg'
}).watermark({
done: function (imgURL) {
console.log(imgURL);
}
});
});To use text instead of an image, provide a string to the text parameter. Note that providing text will disable the path parameter.
$(function() {
$('.img_awesome').watermark({
text: 'GOOGLE.COM',
textWidth: 100,
gravity: 'w',
opacity: 1,
margin: 12
});
});Apply the .watermark() method to a jQuery selector to process images. The plugin processes images client-side using HTML5 and JavaScript, meaning no server-side processing is required.
$(function() {
$(SELECTOR).watermark(OPTIONS);
});The .watermark() method accepts an options object to customize the watermark appearance, position, and output format.
| Name | Type | Default | Description |
|---|---|---|---|
path | String | 'watermark.png' | Path to the watermark image (URL or base64). Disabled if text is used. |
text | String | '' | Text to use as a watermark. |
textWidth | Number | 130 | Text frame width in px. |
textSize | Number | 12 | Font size in px. |
textColor | String | 'white' | Text color (HEX or RGBA). |
textBg | String | 'rgba(0, 0, 0, 0.4)' | Background color (HEX or RGBA). |
gravity | String | 'se' | Position: nw, n, ne, w, e, sw, s, se, c. |
opacity | Number | 0.7 | Transparency (0 to 1). |
margin | Number | 10 | Distance from edge in px. |
outputWidth | Number | 'auto' | Output width in px or 'auto'. |
outputHeight | Number | 'auto' | Output height in px or 'auto'. |
outputType | String | 'jpeg' | Format: jpeg, png, or webp (webp is Chrome-only). |
done | Function | function(imgURL){this.src=imgURL;} | Callback after image is created. Receives imgURL. |
fail | Function | function(){} | Callback on error. |
always | Function | function(){} | Callback when processing finishes (both done and fail). |