Question

我想用图像（base64字符串）填充画布，然后在画布中添加文本。

最初的想法（JavaScript浏览器应用程序）：我想将base64字符串txtb64（图像）设置为画布的背景图像，然后在其上添加文本。

downloadtext: function() {
  var sign = this.getView().byId("SigId");
  var txtb64 = signpad.getSignAsJpeg();

  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext('2d');
  var image = new Image();
  image.src = txtb64;
  image.addEventListener("load", function(event) {
    console.log("Ready!");
  });

  ctx.drawImage(image, 0, 0);

  ctx.fillText('My random text', 0, 0);

  var dataURL = canvas.toDataURL("image/jpeg");

  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();
},

问题是我总是得到一个黑色矩形作为输出。我的代码有什么问题，因为我看不到错误。

Answer 1

您似乎应该将下载新图像所需的代码放在创建的图像的“加载”事件处理程序中。之所以需要这样做是因为load事件可能在其下面的代码运行之后触发，从而导致在画布上放置一个空图像。

您还要两次声明var image = new Image();，这也可能引起问题。呼叫一个image1和另一个image2可以防止这种情况。

警告：运行此代码段将触发下载请求。

var data = "data:image/png;base64,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";

var can = document.getElementById('can');
var ctx = can.getContext('2d');
var img = new Image();

img.src = data;

img.addEventListener('load', e =>
{
  ctx.drawImage(img, 0, 0);
  
  ctx.fillText('My random text', 100, 100);
  
  var dataURL = can.toDataURL("image/jpeg");

  var image = new Image();
  var element = document.createElement('a');

  image.src = dataURL;
  
  element.setAttribute('href', image.src);
  element.setAttribute('download', 'image');
  
  document.body.appendChild(element);
  
  element.click();
});

<canvas width="300" height="300" id="can"></canvas>

如何填充画布和添加文本

1 个答案: