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

Question

我正在尝试使用 watermark.js 插件，但只想在点击事件中为图片添加水印。也就是说，我不希望所有图像都只有带有点击事件或更改事件的图像才带有水印。我正在做的是启动水印插件，并在单击提交事件上向图像添加 class 'watermark' 但它不起作用。谁能指导我如何去做。

            <!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 已添加到已定义 class 的图像中。因此，您可以将 class 名称 'watermark' 动态添加到单击的图像。然后运行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') 选择器可以替换为您可以分配给要标记的图像的 class 名称。

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

Trying to use watermark.js on a click event

html

javascript

jquery

watermark