Jquery Image Watermark Example - Jquery
How to create image watermark in jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Watermark code creates a customizable and movable watermark on your images. Follow the below steps to create an image watermark.
Step:1
Download this plugin from the following link"http://hscripts.funflys.com/responsive/codes-snippets/js/watermarker.js"
Step:2
Provide your image path in this html code.
<img src="Your Background Image Path" id="image" style="width:100%;height:100%;" >
Step:3
Your watermark image path should be imagePath: "watermark image path"
You need jquery.js file to run this code.
Note : If you want run this script you need jquery.js file above version 1.8.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.watermarker-wrapper {position: relative; background-color: aqua; }
.watermarker-wrapper .watermarker-container { width: 100px; height: 100px;
background-color: red; position:absolute; min-width:40px; min-height:40px;cursor: move;
}
.watermarker-wrapper .watermarker-container .watermarker-image { width: 100%; height: 100%; }
.watermarker-wrapper .watermarker-container .watermarker-image { width: 100%; height: 100%; }
.watermarker-wrapper .watermarker-container .resizer { position: absolute; width: 20px; height: 20px;
right:0px;bottom:0px; cursor: se-resize; background-size: 100% 100%;
}
</style>
</head>
<body style="margin:0;">
<div class= "image" style="width:800; height:600; display:inline-block;position: relative;left: 25px;top: 30px;" >
<img src="Your Background Image Path" id="image" style="width:100%;height:100%;" >
</div>
</body>
<script src="watermarker.js" type="text/javascript"></script>
<script type="text/javascript">
;(function(){
function updateCoords (coords){
$("#posx").val(coords.x);
$("#posy").val(coords.y);
$("#width").val(coords.width);
$("#height").val(coords.height);
$("#opacity").val(coords.opacity);
}
$("#image").watermarker({
imagePath: "watermark image path",
offsetLeft:30,
offsetTop: 40,
onChange: updateCoords,
onInitialize: updateCoords,
containerClass: "myContainer container",
watermarkImageClass: "myImage image",
watermarkerClass: "js-watermark-1 js-watermark",
data: {id: 1, "class": "superclass", pepe: "pepe"},
onRemove: function(){
console.log("Removing...");
},
onDestroy: function(){
console.log("Destroying...");
}
});
$(document).on("mousemove",function(event){
$("#mousex").val(event.pageX);
$("#mousey").val(event.pageY);
});
})();
</script>
</html>
