嘗試在單擊事件上使用watermark.js

我正在嘗試使用watermark.js插件，但只想在帶有水印的圖像上單擊事件。也就是說，我不希望所有的圖像都具有僅具有點擊事件或更改事件的水印。我所做的是啓動水印插件，並在點擊提交事件中爲圖像添加類「水印」，但它不起作用。任何人都可以請指導我如何去做。嘗試在單擊事件上使用watermark.js

  <!doctype html> 
      <html lang="en-us"> 

      <head> 
       <title>watermark.js basic demo</title> 
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
      </head> 

      <body style="margin:0;padding:0;"> 
       <div style="width:500px;position:relative;margin:auto;"> 
        <h1>watermark.js basic demo</h1><a href="http://www.patrick-wied.at/static/watermarkjs/">Back to watermark.js</a> The first and the third image will get a predefined watermark: 
        <img src="img/1.png" class="watermark" /> 
        <img src="img/2.png" id="water" /> 
        <img src="img/3.png" id="water" /> 
       </div> 
       <form action=""> 
        <input type="submit" value="Submit"> 
       </form> 
       <!-- Look at the configuration --> 
       <script src="watermark.js"></script> 
       <script> 
       var load = false; 
       window.onload = function() { 
        if (!load) { 
         wmark.init({ 
          /* config goes here */ 
          "position": "top-left", // default "bottom-right" 
          "opacity": 100, // default 50 
          "className": "watermark", // default "watermark" 
          "path": "water.png" 
         }); 

         load = true; 
        } 
       } 
       </script> 
       <script> 
       $(document).ready(function() { 
        $("form").submit(function() { 
         $("img").addClass("watermark"); 
        }); 
       }); 
       </script> 
      </body> 

      </html>

來源

2015-11-12 Fearlessinc

那麼，watarmark被添加到具有定義的類的圖像。所以你可以動態地將類名'水印'添加到點擊的圖像。然後運行wmark.init命令來渲染水印效果。使用jquery這很容易。

JS/jQuery的

$(document).ready(function(){ 

    $('img').on('click', function(){ 
     $(this).addClass('watermark'); 

     wmark.init({ 
      /* config goes here */ 
      "position": "bottom-right", 
      "opacity": 50, 
      "className": "watermark", 
      "path": "water.png" 
     }); 
     // Remove class after the mark has been applied 
     // This way it doesn't re-render the watermark when you 
     // click another image 
     $(this).removeClass('watermark'); 
    }); 

});

的$（「IMG」）選擇器可任意替換，你可以指定你想標記的圖像類名。

HTML

<img src="img1.jpg class="markable"> 
<img src="img2.jpg> 
<img src="img3.jpg class="markable">

JS/jQuery的

$(document).ready(function(){ 

    $('.markable').on('click', function(){ 
    ... ... etc 
    ... ... etc 
});

來源

2015-11-12 04:08:40 magreenberg

謝謝@magreenberg – Fearlessinc

嘗試在單擊事件上使用watermark.js

回答

相關問題