下载时为图像加水印......可以吗？

Posted 2023-02-25

【中文标题】下载时为图像加水印......可以吗？

【英文标题】：Watermark an image upon download...is it possible?

【发布时间】：2012-03-16 18:49:37

【问题描述】：

带有是/否答案的简单问题，如果是...那么如何？

假设你有一个 html 页面，上面有一张没有任何水印的图片。

如果用户将图像保存到他们的计算机上，是否可以在该图像上放置水印？

我需要一个简单的功能，可以在下载或保存时为图像添加水印...

我知道一旦图像在浏览器中加载，它在技术上是下载的，所以有没有办法在屏幕上显示没有水印的图像，如果用户打开浏览器缓存，他/她会发现带水印的副本？

如果有人使用任何平台（php、GD、jQuery 等）完成此操作，我们将不胜感激。

【问题讨论】：

您无法区分下载图像以在网页内查看的人（例如<img src="...">）或直接访问图像以在图像外查看/下载图像的人。无论用户如何显示它们，您都必须为所有图像添加水印。

屏幕上没有水印..屏幕是浏览器..是吗？如果他保存页面怎么办！

我认为你放了一个丑陋的水印，这就是为什么你不在一开始就显示它的原因:-)

用户看到的就是缓存中的内容。这就是缓存的全部意义所在。您可以将其设置为不可缓存并具有指向水印版本的链接，但这仍然不能阻止用户以浏览器的方式简单地检索文件（正如@Marc B 提到的那样）。

另外，是什么阻止了人们使用屏幕帽？这就是DRM、水印等的症结所在，如果用户想要，他们会想办法得到它。如果您真的想要水印，请不要给用户任何途径来获取/查看没有水印的图像。

【参考方案1】：

一个技巧可能是将 2 张图片组合在一起，使它们合二为一。 我有图像A：

然后我添加图片B（水印版）

因此，当您为用户显示图像时，您使用一张作为背景，另一张作为图像，因此当用户尝试下载时，他们只会得到一部分。当然，如前所述，用户将能够获得他们在屏幕上看到的所有内容，但大多数用户将无法正确组合图像。

请注意，上面的图片必须是透明的。

我建议你做这个服务器端，并在你切掉水印后缓存修改后的图像

【讨论】：

或者我右键单击您的图像并选择查看背景图像。这不是一个真正的正确方法

正如我在第一个答案中所说的“......用户将能够在屏幕上看到他们可以看到的所有内容......”，但这将创建一个解决方案，使用户难以无需做大量工作即可获取您的图像。

我同意 Bjørne 的解决方案，因为如果用户不按自己的方式行事，他们就会意识到侵犯版权，顺便说一下，这在任何标准网站的使用条款部分都有.除此之外，还可以使用加密技术在图像中注入版权信息，还可以禁用右键单击等，以表明显示的信息/图像仅用于查看目的，而不是“借用”。

【参考方案2】：

您可以在这里阅读如何使用 PHP：http://www.sitepoint.com/watermark-images-php/

我个人认为使用 javascript 是不可能的，因为正如您自己已经说过的那样，它已经被下载了。 但是不要把我钉在那个上面。

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

【讨论】：

对此+1。另请参阅 GD and Image Functions 和 ImageMagick

【参考方案3】：

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

您的图片高度为200px，您在图片底部添加了一个额外的20px 水印（上传时）（因此它实际上不在图片顶部）。所以现在整个图像的高度为220px;，但是你将它放在一个元素内，给该元素一个200px 高度和一个隐藏的溢出。

【讨论】：

当水印在图片下方时，这是否真的有意义。然后我用油漆打开它并切掉底部

很好的建议，这正是我从研究中发现的，想象得到一个全屏图像，在中心加水印，然后在顶部有另一个 div，只有片段/切片没有水印...可以通过将图像切片然后将其放回原处来走得更远，这通过 php 相当简单...

【参考方案4】：

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

是的，用户的缓存中已经有了无水印版本，但只有高级用户才知道如何访问这些图像。

$('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/

【讨论】：

根本不起作用。您是否尝试过右键单击然后选择查看图像？通常你会看到新图像，但有时会发生上下文菜单足够快而你看到旧图像

@SvenBieder don't works at all. -- 我已经在 IE7-8、Chrome 17、Firefox 10、Safari 5 中进行了测试。很可能你的互联网连接不是最后的闪电，所以你只需要预加载带水印的图像，使其快速更改。在我保存图像时测试的每个浏览器中，它都保存了水印版本。

我没试过直接保存图片。我已经做到了，就像我通常自己做的一样。在保存之前首先查看图像。但你是对的，我在工作，而且连接很糟糕。但这意味着您必须意识到，当时没有全宽带的用户可能会看到水印图片，或者可能会看到原始图片。而且我还猜想他想要一个自动水印功能，他不需要为他想要显示的每张图片上传 2 张图片。但我喜欢这种方法。

无论哪种方式，您都可以通过 jquery 禁用右键单击和打印屏幕...我的主要目的是看看我们是否可以在展示我们的作品的同时想出一些保护知识产权和创意财产的方法。 .. 感谢 Jasper 的这些建议！

也不会阻止他们简单地将图像拖到他们的桌面上

【参考方案5】：

用户可以看到他们可以拿走的任何东西。只有下载后才能添加水印。当图像显示在浏览器中时，它已经下载了。

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

【参考方案6】：

是的，这是可能的。你所要做的就是，

调用下载函数，我们可以在其中实现水印图片的下载。 我使用了 AngularJS、HTML、JQuery 和 watermarkJS，你可以在这里找到(http://brianium.github.io/watermarkjs/)

HTML: <a href="javascript:void(0)" ng-click="DownloadSample()">Download Sample</a> Javascript：

$scope.selectedWatermarkType = 'Text';
$scope.selectedPosition = 'Bottom-left';
$scope.text = 'Sample Watermark';
$scope.size = '45';
$scope.selectedFont = 'Arial';
$scope.ColorCodeGlobalObj.colorcode = 'ffff';

$scope.DownloadSample = function () 
if ($scope.selectedWatermarkType == 'Text') 
                if ($scope.selectedPosition == 'Bottom-left') 
                    watermark(['/assets/js/node_modules/watermarkjs/examples/img/shepherd.jpg'])
                    .image(watermark.text.lowerRight($scope.text, $scope.size + 'px ' + $scope.selectedFont, '#' + $scope.ColorCodeGlobalObj.colorcode, 0.5))
                    .then(function (img) 
                        saveImageAs(img);
                    );
                

'img'是带水印的图像对象，可用于下载图像。

function saveImageAs(imgOrURL) 
        imgOrURL.src.replace('image/png', 'image/octet-stream');
        if (typeof imgOrURL == 'object')
            imgOrURL = imgOrURL.src;

        var link = document.createElement("a");

        link.setAttribute("href", imgOrURL);
        link.setAttribute("download", 'watermarkSample.png');
        link.click();
    

此代码执行带水印图像的下载。未加水印的图像仍然在提到的 srcpath 中可用，可以附加到“img”标签并可以查看。

希望这会有所帮助！