如何使用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和/或查看源以获取原始图像网址，即可在客户端完成任何操作。 watermark.js脚本也容易受到攻击。我认为这是一个有趣的练习，可能会阻止一个随意的访客扯掉图像。然而，任何坚定的人都可以轻易地击败这一点。