Знаете ли вы, что можно поставить водяной знак на фото, которое находится на том же домене, что и ваш сайт, только используя JavaScript? Благодаря <canvas>
мы можем изменять изображения и показывать их различными способами, как если бы они были изначально доступны таким образом всем через JavaScript. Следующая функция - это быстрый и грязный пример того, как использовать холст для добавления водяного знака в <img>
:
function watermarkImage(elemImage, text) {
// Создаём тестовое изображение, чтобы получить правильные размеры изображения.
var testImage = new Image();
testImage.onload = function() {
var h = testImage.height, w = testImage.width, img = new Image();
// Затем загружаем изображения с SVG водяным знаком ...
img.onload = function() {
// Сделайте canvas с изображением и водяным знаком
var canvas = Object.assign(document.createElement('canvas'), {width: w, height: h});
var ctx = canvas.getContext('2d');
ctx.drawImage(testImage, 0, 0);
ctx.drawImage(img, 0, 0);
// Если PNG невозможно отобразить, показываем ошибку в консоли
try {
elemImage.src = canvas.toDataURL('image/png');
}
catch (e) {
console.error('Cannot watermark image with text:', {src: elemImage.src, text: text, error: e});
}
};
// SVG-изображение водяного знака (HTML-текст внизу справа)
img.src = 'data:image/svg+xml;base64,' + window.btoa(
'<svg xmlns="http://www.w3.org/2000/svg" height="' + h + '" width="' + w + '">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml">' +
'<div style="position: absolute;' +
'right: 0;' +
'bottom: 0;' +
'font-family: Tahoma;' +
'font-size: 10pt;' +
'background: #000;' +
'color: #fff;' +
'padding: 0.25em;' +
'border-radius: 0.25em;' +
'opacity: 0.6;' +
'margin: 0 0.125em 0.125em 0;' +
'">' + text.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">") + '</div>' +
'</div>' +
'</foreignObject>' +
'</svg>'
);
};
testImage.src = elemImage.src;
}
Теперь давайте воспользуемся функцией watermarkImage()
на изображение, находящимся на том же домене:
Используя приведенный ниже код, получаем изображение с водяными знаками (сверху справа), показывающее окрестности Ensanche Espaillat (Сантьяго-де-лос-Кабальерос, Доминиканская Республика):
var elemImg = document.getElementById('imgToWatermark');
watermarkImage(elemImg, 'Ensanche Espaillat');
Конечно, эта простая функция не является полнофункциональным решением для добавления водяных знаков ко всем изображениям. Например, могут произойти следующие случаи:
- Требуется просто хотим создать изображение с водяными знаками с URL-адреса изображения.
- Нужно изменить цвет фона водяного знака.
- Нужно использовать логотип как водяной знак.
- И т.д.
Если функция watermarkImage()
работает, водяной знак будет добавлен к изображению, но если изображение не будет изменено. Это делается с целью избежать странного поведения при сбое. Существуют две основные причины:
- Изображение, которое вы хотите использовать для водяного знака, находится не в том же домене, что и страница с кодом JavaScript.
- Браузер, выполняющий код, не поддерживает добавление изображений и / или SVG в
<canvas>
.
Для таких случаев есть отличное решение, называемое watermark.js, которое, скорее всего, предоставит все варианты, которые могут быть необходимы для водяного знака на изображениях.