Текстовый водяной знак на холсте Javascript

В настоящее время я улучшаю приложение javascript (запускаю его в браузере) с помощью панели подписи. Загрузив картинку, я хочу добавить текст водяного знака на картинку. Подписание на холсте и загрузка строки base64 работают нормально, но в настоящее время я не нашел способа добавить текст водяного знака к изображению.

Это мой текущий код. Здесь я хотел добавить второй холст в свой текущий холст (у меня есть фрагменты кода из других сообщений в блогах):

    downloadpic: function () {
      var mypad = this.getView().byId("digitalSignatureId");

      // new
      var dataURL = watermarkedDataURL(mypad,"It's Mine!");

      var imageb64 = dataURL.getPadAsJpeg();

      var image = new Image();
      var element = document.createElement('a');

      image.src = imageb64;

      element.setAttribute('href', image.src);
      element.setAttribute('download', 'image');
      element.style.display = 'none';

      //document.body.appendChild(element);
      element.click();
      //document.body.removeChild(element);
      //download(image, image.jpeg, "image/jpeg");
    },


    watermarkedDataURL: function (canvas,text) {
        var tempCanvas=document.createElement('canvas');
        var tempCtx=tempCanvas.getContext('2d');
        var cw,ch;
        cw=tempCanvas.width=canvas.width;
        ch=tempCanvas.height=canvas.height;
        tempCtx.drawImage(canvas,0,0);
        tempCtx.font = "24px verdana";
        var textWidth=tempCtx.measureText(text).width;
        tempCtx.globalAlpha=.50;
        tempCtx.fillStyle='white'
        tempCtx.fillText(text,cw-textWidth-10,ch-20);
        tempCtx.fillStyle='black'
        tempCtx.fillText(text,cw-textWidth-10+2,ch-20+2);
        // just testing by adding tempCanvas to document
        document.body.appendChild(tempCanvas);
        return(tempCanvas.toDataURL());
    },

В целом этот код не работает, но я думаю, что я на правильном пути, не так ли? Функция watermarkedDataURL должна добавить водяной знак. Функция downloadpic должна загрузить картинку с водяным знаком.

Какую библиотеку js вы используете для водяных знаков? это watermark-js?

egor518 30.04.2019 09:44

это хорошая библиотека для водяных знаков js - brianium.github.io/водяной знак

egor518 30.04.2019 09:45

@АлиД. есть только приведенный выше код, и в настоящее время библиотека не реализована. Есть ли у вас дополнительная документация о водяных знаках-js или опыт их использования?

Alfons-Alpi 30.04.2019 10:08

Обратитесь к приведенному ниже ответу.

egor518 30.04.2019 10:26
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
860
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы заинтересованы в watermark-js lib, то я хотел бы поделиться с вами своим бедным фрагментом.

Этот связь - это просто документация, на которую вам лучше взглянуть.

watermark использует датаури из строка base64 для представления изображения.

// apply watermark on thumbnail
var options = {
  init(img) {
    img.crossOrigin = 'anonymous'; // VERY IMPORTANT!!!
  }
};
// watermark ① text center
watermark([datauri], options)
.image(watermark.text.center('Kindy', '80px serif', 'white', 0.5))
.then(function(img_step1) {
  // watermark ② text lower-right
  watermark([img_step1.src], options)
  .image(watermark.text.lowerRight($scope.selMonthJP, '24px serif', 'white', 0.5))
  .then(function(img_step2) {
    // TODO
    console.info(img_step2.src);
    // HERE, I added 2 watermarks
    // This is a snippet from an Angular.js project
  });
});

Напоминаем, что img.crossOrigin = 'anonymous'; — ключевая точка.

я нашел еще одну интересную ссылку в Интернете: codepen.io/atelierbram/pen/RgKLZK

Alfons-Alpi 30.04.2019 13:12

У вас есть идеи, как реализовать watermark.js?

Alfons-Alpi 30.04.2019 15:00

меня использовали watermark-js, но то, как вы будете реализовывать, зависит от вас.

egor518 30.04.2019 15:20

Другие вопросы по теме