如何填充画布并添加文本

Question

我想用图像（base64-string）填充我的画布，然后在画布中添加文本。

最初的想法（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

看起来您应该将下载新图像所需的代码放在您创建的图像的“加载”事件处理程序中。 这是必需的，因为加载事件可能会在其下方的代码运行后触发，从而导致将空图像放到画布上。

你也声明var image = new Image(); 两次，这也可能导致问题。 调用一个image1和另一个image2将阻止这种情况。

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

 var data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAFpUlEQVR4nO3a0W7bOBRAQf//T3efFnAFibzeNN2ecgYIEiu2EoDCAUnp9QMg4vV///HZPsXk/voqSYJ3LiPNb7Pagrsev8bp7P+cx6ny7a1w+idbTuQTrTEadb/UUmKcZ113MnmZmonUeI863WoXp+p7Jea7HOIsR51vcBWkXneuG+905d0tG/m5GnC/bLeOeQrP6Pp2ZcRYjzpdMlnq7u4PT89x9hrMYcf6zp2emJjOup/Ncj01/5gxGnC/b3embzpCeHhxdhZGzGHE+9hSK6ab49NGFuyWlO4VnM9p8ZBWh68+7GdPTOe9mUatZGecw2ox9ZV9pGqDVeTzWgBFnbDqLuvv9J3cL349Nlo6cw6gz9rS/dH29CttuaTg9H2cy+oztQnR9vXuEYXo3cfV/cBYjz0eeHi1Y3d375HzX49dj17/FWYw8H1nFYrekm0btaSa3+/v8/Yw+Y7ul31Oc7l5fz3f3PpHiypXA2Go5ONksfwrbKnh3f4NzuQL4yG6mtFoCrs65u8O4OwdncAXwkcnjCO/f7z6zmjV9smHPeVwRjO32m6ZLw9W5V/tg4IpgZDfr2e1nrT6z+jy8c0WwNd23muxf7WZc030vzuSKYGn62MLq83evd48/2MfijquBpadwTPeqdpHbzb4sD3nnKmBrt7yb/H4XnMkmvWjhCmBkNfv59/Xq+/DfmID5+2XZIAAAAASUVORK5CYII="; 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>