Question

我有一个创建base64图像的Javascript代码，但是现在我想从该base64图像中提取图像数据。我该怎么做？您可以实时查看脚本here。

Javascript：

function createBadge(img) {
  var c = document.createElement("canvas");
  var ctx = c.getContext("2d");
  c.width = img.width;
  c.height = img.height;
  var title = "Your preferences:";
  var prefer = preferences.reduce(function(acc, pref, ind) {
    return acc.concat([(ind + 1) + ': ' + pref])
  }, []);
  var text1 = "Don't forget to send your 1-page registration form by e-mail or post to your",
    text2 = "Commune or drop it off in person before the 31st of July!",
    text3 = "More info at www.vote.brussels";
  ctx.drawImage(img, 0, 0);
  // Filtro
  ctx.fillStyle = "#000000";
  ctx.globalAlpha = 0.51;
  ctx.fillRect(0, 0, c.width, c.height);
  ctx.globalAlpha = 1;
  // Titolo
  ctx.fillStyle = "#fb4164";
  ctx.font = "500 69px Montserrat";
  ctx.fillText(title, 10, 65);
  // Preferenze
  ctx.fillStyle = "#ffffff";
  ctx.font = "28px Montserrat";
  var int = 60;
  var y = 130;
  prefer.forEach(function(str) {
    ctx.fillText(str, 50, y);
    y += int;
  });
  // Testo
  ctx.fillStyle = "#ffffff";
  ctx.font = "28px Montserrat";
  ctx.textAlign = "center";
  ctx.fillText(text1, c.width / 2, c.height - 130);
  ctx.fillText(text2, c.width / 2, c.height - 90);
  ctx.fillText(text3, c.width / 2, c.height - 20);
  img.src = c.toDataURL();
}

HTML：

<img id="basebadge" src="https://www.lucapolidori.eu/VoteBrussels/wp-content/uploads/2018/06/share-1.png" class="centered">

P.S。我需要数据，以便可以解码图像并将其作为PNG图像保存到服务器。

从base64图像中提取数据

0 个答案: