jQuery-有什么办法通过jquery的ajax请求图片,再转码为base64进行显示?
<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>ajaxdemo</title>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad(){
$.ajax({
url: '/images/img1.png',
type:'get',
datatype:'text',
error:function(){
alert("Error");
},
success:function(str,info){
document.getElementById('imgid').src='data:image/png;base64,' + encode64(img);
}
});
}
</script>
</head>
<body onload="onLoad()">
<img id='imgid' src="" />
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
这样通过Ajax请求图片,光就安全和性能效率就是一个很大的问题,如果你只是为了调试玩玩倒是可以研究研究,不过不建议这么做,还有一个最大的问题是以 <img src="date:image" 的方式显示图片目前也只有 Firfox、Chrome、Opera、Safari 这些浏览器都已经支持,IE不支持这样的写法。所以还是用图片路径吧。
很新颖的显示图片方法,但是这种显示图片用ajax来获得安全是瓶颈不说,就性能来说,也不建议你这么做呀,不过给你贴个用php对图片进行加密的方法:
function encode64($file){
$extension = explode(".", $file);
$extension = end($extension);
$binary = fread(fopen($file, "r"), filesize($file));
return '<img src="data:image/'.$extension.';base64,'.base64_encode($binary).'"/>';
}
//把return返回的内容改成:echo base64_encode($binary); 然后你ajax请求上面方法就可以实现你想要的图片加密内容了。
主要是get的datatype的问题。jQuery好像没有设计返回是application/oct-stream或者image/png之类的情况……服务器那边能直接返回base64吗