Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
watermark
Advanced tools
Readme
JQuery plugin Watermark help you seal batch of images, like a stamp tool.
Because this plugin is written in HTML5 and Javascript, so it will operate without a server for image processing, bandwidth limit is no longer the thing you need to worry.
Suitable uses for low-bandwidth web server, or web creation services, free forums without management server as Blogspot, Forumotion, ...
https://lelinhtinh.github.io/watermark/
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with"
Direct download file watermark.zip or watermark.tar.gz or use the command line:
git clone https://github.com/lelinhtinh/watermark.git
bower install watermark
npm install watermark
This plugin requires jQuery library from 1.5 or above, add it at the end of your HTML document as follows:
<!-- jQuery 1.5+ -->
<script src="jquery.js" type="text/javascript"></script>
<!-- jQuery plugin Watermark -->
<script src="jquery.watermark.js" type="text/javascript"></script>
Usage:
$(function() {
$(SELECTOR).watermark(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, 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. |
always | Function | function(){} | Called when processing finishes (done and fail). |
Note:
text
parameter, path
parameter will be disabled. The watermark will be created from the text you type in text
parameter.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.<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="" />
$(function() {
$('.img_awesome').watermark();
});
With this usage, you need put watermark.png
image in the root directory. You can replace it by using the path
parameter with an URL image or base64 image.
$(function() {
$('.img_awesome').watermark({
path: 'http://i.imgur.com/LcpZHu5.png'
});
});
For example, limit the maximum width is 500px.
$(function() {
$('.img_awesome').watermark({
outputWidth: 500
});
});
You can also limit the height of image with outputHeight
parameter. Should not use 2 size parameters simultaneously, because it can distort your image. Should only use a parameter, it will adjust the remaining parameter with image ratio.
Like 9gag style.
$(function() {
$('.img_awesome').watermark({
text: 'GOOGLE.COM',
textWidth: 100,
gravity: 'w',
opacity: 1,
margin: 12
});
});
If you use the image URL, and you just want to export the image URL (added watermark), you can use the following ways:
$(function() {
$('<img>', {
src: 'http://i.imgur.com/AAPx3rB.jpg'
}).watermark({
done: function (imgURL) {
console.log(imgURL);
}
});
});
$(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();
}
}
});
});
});
FAQs
Add watermark on images use HTML5 and Javascript.
The npm package watermark receives a total of 118 weekly downloads. As such, watermark popularity was classified as not popular.
We found that watermark demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.