使用JavaScript创建base64编码的图像

Question

由于图像是数据，因此我们可以将代码编写为

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

现在我的观点是：我们能用JavaScript创建Base64数据吗？是否有相关框架可以使用？

我实际上需要的是将一个字符串（比如"牛"）转化为图像。

注：我不想调用服务器来完成此操作。虽然我知道可以通过将"牛"作为参数传递给服务器端代码来进行调用，但我想要使用JavaScript从浏览器中完成这个过程。

- Partha Sarathi Ghosh

Answer 1

你可以使用canvas创建图像。有许多canvas框架可以帮助你。然后你可以将你的canvas“导出”为base64字符串。

尝试使用jCanvas进行示例： HTML

<p>
  Result:
</p>
<p>
  <textarea id="result" cols="60" rows="10"></textarea>
</p>
<p>
  <input id="click" type="button" value="Convert to base64">
</p>
<p>
  Canvas<br><canvas id="myCanvas" width="100" height="100"/>
</p>

JavaScript

$(function(){

  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 80, 80);

  $('#click').click(function() {
    $('#result').html($("canvas").getCanvasImage());
  });
});

演示

- Ali Mamedov

---

是的，这似乎是一个可行的选择。 - Partha Sarathi Ghosh

Answer 2

我希望我理解你的问题是正确的。您需要实际数据而不是URI？？

我在MuniR中找到了这个小片段，我认为这就是您想要的。

问题是，我们似乎无法摆脱画布，创建具有图像大小的画布，绘制图像并使用画布对象存储它！-不一定使用它...希望对您有所帮助，祝好运

function getBase64FromImageUrl(url) {
    var img = new Image();

    img.setAttribute('crossOrigin', 'anonymous');

    img.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width =this.width;
        canvas.height =this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

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

        alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
    };

    img.src = url;
}

- Sune Christiansen

---

问题不是从现有图像获取base64数据，而是您实际上仍在回答问题，并且基本上应该是被接受的答案，因为解决方案不需要像@AliMamedov的答案那样使用额外的框架。关键部分在于onload函数，本质上canvas.toDataURL("image/png")就是所需的魔法。 - TheStoryCoder

Answer 3

 var element = new Image();
 element.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

如果您想向您的元素添加id，可以这样做：

 document.body.appendChild(element);

您需要在想要显示图像的父元素上使用appendChild。它会自动加载。

- SPKE30

---

这里有图像数据。我不想创建DOM，我想创建图像数据。 - Partha Sarathi Ghosh

回答一个根本没有被问到的问题。 - TheStoryCoder