У меня есть холст, где я получаю подпись (браузерное приложение, JavaScript).Я получаю эту подпись в строке base64, и я могу скачать ее.Это работает нормально.Теперь я хочу добавить текст к картинке (base64-строка).
В своем исследовании я сталкивался с различными методами, такими как водяные знаки, но это не работает для меня, и я думаю, что это немного сложно.Есть ли возможность или простой способ добавить текст в строку base64?
downloadpic: function () {
var sign = this.getView().byId("Signature");
var imagetxtb64 = sign.getSigAsJpeg();
var image = new Image();
var element = document.createElement('a');
image.src = imagetxtb64;
element.setAttribute('href', image.src);
element.setAttribute('download', 'image');
element.style.display = 'none';
element.click();
}
В переменной imagetxtb64
есть строка base64.Могу ли я изменить его, добавив в него какой-нибудь текст?
Обновление:
Теперь у меня есть следующая функция:
downloadtext: function () {
var canvas = document.createElement("canvas");
var sign = this.getView().byId("Signature");
var imagetxtb64 = sign.getSigAsJpeg();
var ctx = canvas.getContext('2d');
ctx.drawImage(imagetxtb64, 0, 0);
var randomtxt = "Random Text";
ctx.font = "30px Arial";
ctx.strokeText(randomtxt, 10, 50);
var dataURL = canvas.toDataURL();
console.log(dataURL);
var image = new Image();
var element = document.createElement('a');
image.src = dataURL;
element.setAttribute('href', image.src);
element.setAttribute('download', 'image');
element.style.display = 'none';
element.click();
},
Я думаю, с помощью ctx.drawImage(imagetxtb64, 0, 0);
я загружаюсуществующий холст в новом.
Но когда я пытаюсь выполнить это, я получаю следующую ошибку:
Uncaught TypeError: Не удалось выполнить 'drawImage' для 'CanvasRenderingContext2D': предоставленное значение не относится к типу '(CSSImageValue или HTMLImageElement или SVGImageElement или HTMLVideoElement или HTMLCanvasElement или ImageBitmap или OffscreenCanvas) '