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

是否可以使用jquery为动画gif，客户端添加水印（文本或图像）。如何使用JavaScript为图像客户端添加水印？

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

我不能让它在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等。但是这必须工作客户端。所以，任何建议，请。

来源

2012-05-31 422

是否有某种原因想要做到这一点？绕过水印的客户端实现会很简单。 – lucuma

你要求的是修改.gif客户端呢？不会覆盖另一个.gif等。我不认为你可以用JavaScript修改一个.gif客户端，但是我很乐意听到这个结果是错误的。 –

@MarkSchultheiss gif是由用户客户端从一系列图像创建的。它的所有功能都完成了客户端，并且我们希望在将其呈现为动画GIF之前在最终图像上添加水印。 – 422

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

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

要做这样的动画GIF你会有更多的工作要做。特别是，你将需要获得作为原始二进制文件的gif，并解析出每一帧，并执行上述操作。由于浏览器不再呈现它，因此您还需要自己动画GIF。

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

所有这一切都说，如果你想用水印保护你的图像，你需要做到服务器端。只需禁用JavaScript和/或查看源代码来获取原始图像url，就可以在客户端完成任何操作。 watermark.js脚本也容易受到同样的影响。我认为这是一个有趣的练习，可能会阻止偶然的访客从图像中剔除。但是，任何足够坚决的人都可以轻易击败。

来源

2012-06-01 14:33:30

Thankyou戴夫。我喜欢这样的回复。如果您可以查看我们的项目，我会很乐意将这个网址私下发送给你。科技教育。 – 422

@ 422看起来像一个有趣的挑战。如果你想联系我，你可以让我通过我的网站在我的生物。 –

<div style="position:relative;width:200px;height:150px;"> 
    <div style="position:absolute;top:0px;left:0px;background-image:url(myimage.jpg);width:200px;height150px;"> 
     &nbsp; 
    </div> 
    <div style="position:absolute;top:0px;left:0px;background-image:url(myWATERMARKimage.jpg);width:200px;height150px;"> 
     &nbsp; 
    </div> 
</div>

来源

2012-05-31 21:27:11 Tschallacka

无需JavaScript。您可以使用它来生成代码块，或更改背景图像值 – Tschallacka

这不会将水印附加到实际图像。这仅仅是一个叠加层的css定位。不是我在之后：see.http：//www.patrick-wied.at/static/watermarkjs/jq/非常感谢回复tho :) – 422

这样做。它在图像上叠加一层包含水印图像的图层。 – Tschallacka

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

回答

相关问题