Добавления водяных знаков на изображения с помощью canvas

Знаете ли вы, что можно поставить водяной знак на фото, которое находится на том же домене, что и ваш сайт, только используя 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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;") + '</div>' +
          '</div>' +
        '</foreignObject>' +
      '</svg>'
    );
  };
  testImage.src = elemImage.src;
}

Теперь давайте воспользуемся функцией watermarkImage() на изображение, находящимся на том же домене:

Исходное изображение Получаемое изображение

Используя приведенный ниже код, получаем изображение с водяными знаками (сверху справа), показывающее окрестности Ensanche Espaillat (Сантьяго-де-лос-Кабальерос, Доминиканская Республика):

var elemImg = document.getElementById('imgToWatermark');
watermarkImage(elemImg, 'Ensanche Espaillat');

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

  • Требуется просто хотим создать изображение с водяными знаками с URL-адреса изображения.
  • Нужно изменить цвет фона водяного знака.
  • Нужно использовать логотип как водяной знак.
  • И т.д.

Если функция watermarkImage() работает, водяной знак будет добавлен к изображению, но если изображение не будет изменено. Это делается с целью избежать странного поведения при сбое. Существуют две основные причины:

  1. Изображение, которое вы хотите использовать для водяного знака, находится не в том же домене, что и страница с кодом JavaScript.
  2. Браузер, выполняющий код, не поддерживает добавление изображений и / или SVG в <canvas>.

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