Question

为什么这个jquery图像水印插件无效？我正在使用官方插件网站上的代码。from here当我看到演示网站的源代码时，他们使用了js / jquery-watermarker-0.3.js。但我无法在任何地方找到这个插件？为什么在演示中这对他们有用。请帮忙。

<html>
<head>
 <script type="text/javascript" src="js/jquery.js">   
 <script type="text/javascript" src="js/jquery-1.4.2.min.js">
    <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
    <script type="text/javascript" src="js/jquery-watermarker-0.2.js">


    <script type="text/javascript">

        $().ready(function(){
            $('#watermarked').Watermarker({
                watermark_img:      "a.png",
                onChange:           showCoords
            });
        });
        function showCoords(c)
        {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
        };

    </script>
    <style type="text/css">
        div.watermark
        {
            border:1px dashed #000;
        }
        img.watermark:hover{
            cursor:move;
        }
    </style>
</head>
<body>
    <img src="1.jpg" id="watermarked" />

    <form method="post" action="phpScriptToMergeBothImage.php">
        <input type="text" id="x" name="x" value="" />
        <input type="text" id="y" name="y" value="" />
        <input type="text" id="w" name="w" value="" />
        <input type="text" id="h" name="h" value="" />

        <input type="submit" name="save" value="Ok >" />
    </form>
</body>
</html>

Answer 1

确保您已从网站（here）下载了该插件，并在您的文件中包含了这些脚本。在上面提供的代码中，看起来你应该有一个名为'js'的文件夹，其中包含'jquery.js'，'jquery-1.4.2.min.js'，'jquery-ui-1.8.6.custom。 min.js'和'jquery-watermarker-0.2.js'。如果是这样，则加载插件。

接下来，确保你的根文件夹中还有'1.jpg'和'a.png'图像，其中'1.jpg'是背景图像，'a.png'是你想要的图像水印是。如果他们没有这些名称，请更改插件代码中的名称以匹配您正在使用的图像的名称。

Answer 2

您的第一行应该是$(function)或$(document).ready(function)：

$(document).ready(function(){
    $('#watermarked').Watermarker({
        watermark_img:      "a.png",
        onChange:           showCoords
    });
});

$()用于在1.3.x中返回包含document的jQuery集合，但在1.4中更改为返回空集合。

此外，您的脚本代码需要关闭</script>

Answer 3

可以找到一个漂亮的水印插件here。

只需使用以下内容进行调用：

<script type="text/javascript">
    $(document).ready(function () {
        $("#textbox1").WaterMark({
            waterMarkText: "Watermark text"
        });
    });
</script>

<input type="text" id="textbox1" name="textbox1" />

还有一个与textareas一起使用的例子。

为什么这个水印插件不起作用？

3 个答案: