Водяной знак изображения при загрузке ... это возможно?

Question

Простой вопрос с ответом да / нет, и если да ... то как?

Предположим, у вас есть HTML-страница с изображением без водяных знаков.

Можно ли разместить водяной знак на этом изображении, если пользователь сохранит его на своем компьютере?

Мне нужна простая функция, которая делает водяные знаки на изображении при загрузке или сохранении ...

Я понимаю, что, как только изображение загружается в браузер, оно технически загружается, поэтому есть способ отобразить изображение без водяного знака на экране, и если пользователь открывает кеш браузера, он находит копия с водяным знаком?

Если бы кто-то сделал это с использованием какой-либо платформы (PHP, GD, jQuery и т. Д.), Ваш вклад был бы оценен.

Answer 1

Один трюк может состоять в том, чтобы объединить 2 изображения, чтобы они стали одним. У меня есть изображение A:

Затем я добавляю изображение B (версия с водяным знаком)

Таким образом, когда вы отображаете изображение для пользователя, вы используете одно в качестве фона, а другое в качестве изображения, поэтому, когда пользователь пытается загрузить, они получат только одну часть. Конечно, как уже упоминалось, пользователь сможет получить все, что он может видеть на экране, но большинство пользователей не смогут правильно комбинировать изображения.

Обратите внимание, что изображение сверху должно быть прозрачным.

Я бы порекомендовал сделать это на стороне сервера и кэшировать измененные изображения, когда вы вырезали водяной знак

Answer 2

Возможное альтернативное решение - поместить изображение внутри элемента со скрытым переполнением.Например:

Ваше изображение имеет высоту 200px, вы добавляете дополнительный 20px водяной знак (при загрузке) внизу изображения (чтобы оно фактически не было сверху изображения),Таким образом, итоговое изображение теперь имеет высоту 220px;, но вы помещаете его в элемент, задаете этому элементу высоту 200px и скрытое переполнение.

Answer 3

Здесь вы можете прочитать, как это сделать с помощью PHP: http://www.sitepoint.com/watermark-images-php/

Лично я не думаю, что это возможно с javascript, потому что, как вы уже сказали, он уже загружен. Но не приставай ко мне.

На стороне сервера это наверняка возможно, как вы можете видеть в приведенной выше ссылке.

Answer 4

Все, что пользователь может видеть, он может взять.Там нет никакого способа, чтобы водяной знак, только если загружен.Когда изображение отображается в браузере, оно уже загружено.

Существует несколько подходов.Я бы порекомендовал вам использовать PHP для добавления водяного знака на изображение перед его отображением.Это означает, что все защищенные изображения на сайте будут отображаться видимым водяным знаком.Второй подход, который я видел, заключается в отображении некачественной версии, которая не имеет водяных знаков, но ограничивает полную версию только теми, кто должен ее видеть.

Answer 5

Вы можете изменить источник изображения, когда пользователь щелкает его правой кнопкой мыши. Таким образом, вы можете изменить источник на версию с водяным знаком, когда пользователь попытается сохранить изображение.

Да, пользователь уже будет иметь версию без водяных знаков в своем кэше, но только опытные пользователи будут знать, как получить эти изображения.

$('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 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' и просмотреть его.

Надеюсь, это поможет!