3

是否可以使用 jquery 在客户端向动画 gif 添加水印（文本或图像）。

在这种情况下，所有处理都是客户端。

我不能让它在 jsfiddle 上工作。但它非常简单，水印被添加到主图像中。

我遇到的问题是我需要这个来处理动画 gif。所以水印显示在右下角。

主js代码为： http: //www.patrick-wied.at/static/watermarkjs/jq/

页面上的脚本：

var config = {
    "path": "watermark.png"
};
$(document).ready(function() {
    $(document).watermark(config);
});

我唯一的问题是，通常我们可以使用 imagemagik gd 和 php 等来处理它。但这必须在客户端工作。所以请有任何建议。

4

1 回答 1

4

没有可用于物理更改原始图像文件本身的客户端 JavaScript。但是，使用 canvas 元素，您可以使用图像数据。

您链接到的 watermark.js 脚本通过将图像绘制到画布元素然后在顶部写入水印图像来工作。我相信它会使用类似img.src = canvas.toDataURL();.

要使用动画 gif 执行此类操作，您将需要做更多的工作。特别是，您需要将 gif 作为原始二进制文件获取并解析出每一帧并执行上述操作。您还需要自己制作 gif 动画，因为浏览器不再渲染它，您是。

发布到这个问题的答案将是一个很好的起点。您还需要查看 gif 格式本身。

综上所述，如果你想用水印保护你的图像，你需要在服务器端进行。只需禁用 JavaScript 和/或查看源代码以获取原始图像 url，就可以击败在客户端完成的任何操作。watermark.js 脚本也容易受到同样的攻击。我认为这是一个有趣的练习，可能会阻止临时访问者盗取图像。但是，任何有足够决心的人都可以轻松击败这一点。

于 2012-06-01T14:33:30.293 回答