如何使用 JavaScript 向图像客户端添加水印？

Question

是否可以在客户端使用 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 等进行处理。但这必须在客户端工作。所以请给点建议。

Answer 1

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

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

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

to this question 发布的答案将是一个很好的起点。您还需要查看 gif 格式本身。

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