由于图像是数据,我们可以将代码编写为
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
现在我的观点是:我们可以使用 javascript 创建 base64 数据吗?有什么框架吗?
我的实际要求是我有一个像“Cow”这样的字符串,我希望它作为图像。
注意:我不希望服务器调用它。我知道我可以通过传递“Cow”作为参数来调用服务器端代码。我的服务器端代码可以生成该图像,但我想使用 JavaScript 从浏览器中执行此操作。
您可以使用画布创建图像。有许多画布框架可以帮助您。然后您可以将画布“导出”为 base64 字符串。
尝试使用此示例jCanvas https://projects.calebevans.me/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 http://jsfiddle.net/7wo2mc3r/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)