javascript - 向图片中的base64字符串添加文本

Question

我有一个画布，可以在其中捕获签名（浏览器应用程序、javascript）。我在 base64 字符串中得到了这个签名，我可以下载它。这工作正常。现在我想在图片中添加一个文本（base64-string）。

在我的研究中，我遇到了不同的方法，比如水印，但这对我不起作用，我认为这并不复杂。是否有可能或简单的方法将文本添加到 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-string。我可以通过添加一些文本来修改它吗？

更新：

我现在有以下功能：

    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);我将现有的画布加载到新的画布中。

但是当我尝试执行此操作时，出现以下错误：

未捕获的类型错误：无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是类型“（CSSImageValue 或 HTMLImageElement 或 SVGImageElement 或 HTMLVideoElement 或 HTMLCanvasElement 或 ImageBitmap 或 OffscreenCanvas）”

标签： javascriptbase64