Question

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

假设您有一个带有图像的HTML页面，没有任何水印。

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

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

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

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

Answer 1

一个技巧可能是组合2个图像，因此它们就变成了一个。我有图像A： enter image description here

然后我添加图像B（水印版） enter image description here

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

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

我建议你做这个服务器端并在剪掉水印时缓存修改过的图像

Answer 2

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

我个人认为不可能使用javascript，因为正如您已经说过的那样，它已经下载了。但是不要指责我。

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

Answer 3

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

您的图片高度为200px，您在图片底部添加了额外的20px水印（上传时）（因此它实际上并不在图片的顶部）。因此，总图像现在的高度为220px;，但是您将其放置在元素中，使该元素具有200px高度和隐藏溢出。

Answer 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/

Answer 5

用户可以看到他们可以采取的任何事情。如果下载，则无法进行水印。当图像在浏览器中显示时，它已经下载了。

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

Answer 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'标记并可以查看。

希望这会有所帮助！

在下载时为图像添加水印......是否可能？

6 个答案: