使用JavaScript創建base64編碼圖像

Question

由於圖像是數據，我們可以將代碼編寫為

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

現在我的觀點是：我們可以用javascript創建base64數據嗎？ 它有什么框架嗎？

我的實際要求是我有一個像“牛”這樣的字符串，我希望它作為一個圖像。

注意：我不想要服務器調用它。 我知道我可以通過傳遞“Cow”作為參數來調用服務器端代碼。 我的服務器端代碼可以生成該圖像，但我想通過JavaScript從瀏覽器中執行此操作。

Answer 1

您可以使用畫布創建圖像。 有許多畫布框架可以幫助您。 然后，您可以將畫布“導出”為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());
  });
});

演示

Answer 2

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

如果您想為身體添加身份證明：

 document.body.appendChild(element);

您必須在要顯示圖像的父元素上使用appendChild。 它會自動加載。

Answer 3

我希望我的問題是正確的。 你想要的是實際的數據，而不是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;
}