В настоящее время я улучшаю приложение 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 - brianium.github.io/водяной знак
@АлиД. есть только приведенный выше код, и в настоящее время библиотека не реализована. Есть ли у вас дополнительная документация о водяных знаках-js или опыт их использования?
Обратитесь к приведенному ниже ответу.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Если вы заинтересованы в 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
У вас есть идеи, как реализовать watermark.js?
меня использовали watermark-js, но то, как вы будете реализовывать, зависит от вас.
Какую библиотеку js вы используете для водяных знаков? это
watermark-js?