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.
Download this plugin from the following link"http://hscripts.funflys.com/responsive/codes-snippets/js/watermarker.js"
Provide your image path in this html code.
<img src="Your Background Image Path" id="image" style="width:100%;height:100%;" >
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>


Ask Questions

Ask Question