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

是否可以使用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脚本通过将图像绘制到canvas元素然后将水印图像写在顶部来工作。 我相信它然后使用类似img.src = canvas.toDataURL();东西用canvas数据替换原始图像源img.src = canvas.toDataURL(); 。

要使用gif动画做这样的事情，你还需要做更多的工作。 特别是，您需要将gif作为原始二进制文件并解析出每个帧并执行上述操作。 您还需要自己设置gif动画，因为浏览器不再渲染它，你是。

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

所有这一切，如果你想用水印保护你的图像，你需要在服务器端做。 只需禁用JavaScript和/或查看源以获取原始图像url，即可在客户端完成任何操作。 watermark.js脚本也容易受到攻击。 我认为这是一个有趣的练习，可能会阻止一个偶然的访客扯掉图像。 然而，任何坚定的人都可以轻易地击败这一点。