使用 JavaScript 创建 base64 编码图像

Question

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

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

现在我的观点是：我们可以用 javascript 创建 base64 数据吗？有什么框架吗？

我的实际要求是我有一个像 "Cow" 这样的字符串，我想要它作为图像。

注意：我不希望服务器调用它。我知道我可以通过将 "Cow" 作为参数传递来调用服务器端代码。我的服务器端代码可以生成该图像，但我想使用 JavaScript 从浏览器中执行此操作。

Answer 1

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

如果您想将 id 添加到您的 body:

 document.body.appendChild(element);

您必须在要显示图像的 parent 元素上使用 appendChild。它将自动加载。

Answer 2

您可以使用 canvas 创建图像。有许多 canvas 框架可以帮助您。然后你可以"export"你的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());
  });
});

Demo

Answer 3

希望我答对了你的问题。您想要实际数据而不是 uri？

我从 MuniR 找到了这个小片段，我想这就是你想要的。

问题是我们似乎无法摆脱 canvas，用图像的大小创建它，绘制图像并使用 canvas 对象来存储它！！-不必须使用它...希望它能有所帮助，祝你好运

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;
}

使用 JavaScript 创建 base64 编码图像

Create base64 encoded images with JavaScript

javascript

base64

png

image-processing