Question

我正在尝试使用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>

Answer 1

好吧，将watarmark添加到具有已定义类的图像中。因此，您可以动态添加类名＆＃39;水印＆＃39;点击图片。然后运行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');
    });

});

$（＆＃39; img＆＃39;）选择器可以替换为您可以分配给想要标记的图像的类名。

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
});

尝试在点击事件中使用watermark.js

1 个答案: