文章/答案/技术大牛

发布

社区首页 >问答首页 >尝试在单击事件上使用watermark.js

问尝试在单击事件上使用watermark.js
EN

Stack Overflow用户

提问于 2015-11-12 03:09:56

回答 1查看 987关注 0票数 0

我试图使用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>

javascript

jquery

html

watermark

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-11-12 04:08:40

瓦察马克被添加到一个有定义类的图像中。因此，您可以动态地将类名“水印”添加到单击的图像中。然后运行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
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33663759

复制

相似问题

问尝试在单击事件上使用watermark.js
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试在单击事件上使用watermark.jsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试在单击事件上使用watermark.js
EN