由于图像是数据,因此我们可以将代码编写为
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
&#13;
现在我的观点是我们可以通过javascript创建base64数据。是否有任何框架。
我的实际要求是我有一种类似于&#34; Cow&#34;的刺痛。我希望它作为一个图像。
注意:我不想要服务器调用它。我知道我可以通过&#34; Cow&#34;来调用服务器端代码。作为参数。我的服务器端代码可以生成该图像。但是我想从浏览器中使用JavaScript。
答案 0 :(得分:4)
您可以使用画布创建图像。有许多画布框架可以帮助您。然后,您可以将画布“导出”为base64字符串。
试试这个样本:
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 强>
答案 1 :(得分:1)
var element = new Image();
element.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
如果您想为身体添加身份证明:
document.body.appendChild(element);
您必须在要显示图像的父元素上使用appendChild。它会自动加载。
答案 2 :(得分:1)
我希望我的问题是正确的。你想要实际数据而不是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;
}