2012-03-16 57 views
1

简单的问题与是/否的答案,如果是的话,那么如何?下载水印图像...有可能吗?

假设您有一个HTML页面,其上没有任何水印。

如果用户将其保存到计算机上,可以在该图像上放置水印吗?

我需要一个简单的函数,在下载水印的图像或保存...

我不明白的是,在浏览器中的图像加载一次,它在技术上下载,所以是有显示的方式在屏幕上没有水印的图像,并且如果用户打开浏览器缓存,他/她会发现一个水印副本?

如果任何人使用任何平台(PHP,GD,jQuery等)完成此操作,您的贡献将不胜感激。

+7

你不能告诉别人之间的差异下载的图像浏览网页内(例如'')或某人直接访问图像以在图像外查看/下载图像。无论用户将如何显示它们,都必须为所有图像加水印。 – 2012-03-16 18:50:36

+0

屏幕上没有水印..屏幕是浏览器..是什么?如果他保存页面! – zod 2012-03-16 18:51:55

+0

我认为你把一个丑陋的水印,这就是为什么你不要在开始时显示它:-) – zod 2012-03-16 18:53:12

回答

2

在这里,您可以了解如何使用PHP做:http://www.sitepoint.com/watermark-images-php/

我个人不认为这是可能的使用JavaScript,因为你已经有了自己说,它已经被下载。 但不要指责我。

在服务器端肯定有可能,正如您在上面的链接中看到的那样。

+0

+1。另请参阅[GD和图像函数](http://php.net/manual/en/ref.image.php)以及[ImageMagick](http://php.net/manual/en/book.imagick)。 php) – Nick 2012-03-16 20:44:44

2

可能的替代解决方案是将图像包含在具有隐藏溢出的元素中。 例如:

你的形象有200px的高度,你在图像的底部添加一个额外的20px水印(上传时)(所以它实际上不是在图像的顶部)。因此,现在总图像的高度为220px;,但是将其放置在元素内部会给该元素一个高度和一个隐藏的溢出。

+0

+1我看过像9gag这样的网站做到这一点。 – 2012-03-16 19:02:05

+1

当水印在图片下时真的有意义。然后我打开它的油漆,并减少底部 – 2012-03-16 21:03:37

+0

伟大的建议,这正是我从我的研究发现,想象得到一个全屏幕图像,水印在中心,然后有另一个div顶部只有部分/切片没有加水印......而且可以通过切片图像进一步将它们放回原处,这很简单,通过php ... – jaguarhaus 2012-03-17 12:27:43

1

当用户右键单击图像时,可以更改图像的来源。这样,您可以在用户尝试保存图像时将源代码更改为带水印的版本。

是的,用户的缓存中已经有了非水印版本,但只有高级用户才会知道如何获取这些图片。

$('img').on('mousedown', function (event) { 

    //check which mouse button was clicked, 1 == left, 2 == middle, 3 == right 
    if (event.which == 3) { 

     //update the source of this image 
     this.src = this.src.replace('.jpg', '_watermarked.jpg'); 
    } 
});​ 

这里是一个演示:http://jsfiddle.net/s6A9m/

+0

根本不起作用。你有没有试图右键点击,然后选择查看图像?通常情况下,你会看到新的图像,但有时会发生上下文菜单速度不够快,并且你看到旧图像 – 2012-03-16 21:05:42

+0

@SvenBieder'根本不工作。“ - 我已经在IE7-8中测试过了, Chrome 17,Firefox 10,Safari 5.最有可能的是,互联网连接并不是最后的闪电,因此您只需预加载水印图像,以便它快速更改。在我保存图像时测试的每个浏览器中,它都保存了水印版本。 – Jasper 2012-03-16 21:12:34

+0

我还没有试图直接保存图像。我已经像我通常自己那样做了。首先在保存前查看图像。但你说得对,我在工作,连接很糟糕。但是这意味着您必须意识到那时尚未使用全宽带的用户可能会看到水印图片,或者可能会看到原始图片。我也猜想他想要一个自动加水印功能,他不需要为他想要显示的每个图像上传2张图像。但我喜欢这种方法。 – 2012-03-16 21:17:07

1

凡是用户可以看到他们可以采取。如果下载,只有水印没有办法。当浏览器中显示的图像已经下载时。

您可以采取几种方法。我建议你使用PHP在图像显示前将水印添加到图像中。这意味着网站上的所有受保护图像都将显示可见水印。我见过的第二种方法是显示未加水印的低质量版本,但将完整版质量限制为仅限于那些应该看到它的人。

2

一个窍门可能是组合2个图像,所以他们成为一个。 我有图像答: enter image description here

然后,添加图像B(水印版) enter image description here

所以,当你显示你使用一个作为背景的用户,另一种为图像的图像,所以当用户尝试下载,他们只会得到一个部分。当然如前所述,用户将能够在屏幕上看到他们所能看到的所有内容,但大多数用户将无法正确合并图像。

请注意,顶部的图像必须是透明的。

我建议做这个服务器端缓存修正后的图像当你切出水印

+0

或我右键单击您的图像,然后选择查看背景图像。这不是一个真正的方法 – 2012-03-16 21:02:00

+4

正如我在我的第一个答案中所说的“......用户能够获得所有他们可以在屏幕上看到的......”,但这会创建一个解决方案,使用户很难抓住你的图像,而不必做很多工作。 – 2012-03-16 21:26:28

+0

我同意Bjørne的解决方案,因为如果用户走出他/她的方式,他们意识到版权侵犯,顺便说一句,这是放在任何标准网站的使用条款部分。除此之外,还可以使用加密技术在图像中注入版权信息,禁用右键单击以及显示所显示的信息/图像仅用于查看目的而不是“借阅”。 – jaguarhaus 2012-04-07 20:26:15