JavaScript 通过HTML的FileReader把图片转成base64
来源:互联网 发布:淘宝号登不上去 编辑:程序博客网 时间:2024/05/29 18:34
刚接触到一个内联图片的概念,内联图片即使把图片文件编码成base64 看下面代码即是内联问题
代码如下:
<img src="data:image/jpeg;base64,/9j/4QqsRX..." alt="">
现有个需求:
用户头像是存的Base64,有两个方法可以将图片转成base64,一个是上传到后台,通过后台代码处理,一个是前台用js处理,下面是用js处理的例子。
通过HTML5 的 File把图片转成Base64示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>简单的html5 File测试 for pic2base64</title><style></style><script>window.onload = function(){ var input = document.getElementById("demo_input"); var result= document.getElementById("result"); var img_area = document.getElementById("img_area"); if ( typeof(FileReader) === 'undefined' ){ result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!"; input.setAttribute( 'disabled','disabled' ); } else { input.addEventListener( 'change',readFile,false );}}function readFile(){ var file = this.files[0]; //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件 if(!/image\/\w+/.test(file.type)){ alert("请确保文件为图像类型"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ result.innerHTML = '<img src="'+this.result+'" alt=""/>'; img_area.innerHTML = '<div class="sitetip">图片img标签展示:</div><img src="'+this.result+'" alt=""/>'; }}</script></head><body><input type="file" value="sdgsdg" id="demo_input" /><br><textarea id="result" rows=10 cols=100></textarea><p id="img_area"></p></body></html>
整理上面代码,实现点击img选择图片,然后显示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>简单的html5 File测试 for pic2base64</title><style></style><script> window.onload = function(){ var input = document.getElementById("fielinput"); var txshow= document.getElementById("txshow"); if ( typeof(FileReader) === 'undefined' ){ result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!"; input.setAttribute( 'disabled','disabled' ); } else { input.addEventListener( 'change',readFile,false ); txshow.onclick = function(){ input.click();} } } function readFile(){ var file = this.files[0]; //判断是否是图片类型 if(!/image\/\w+/.test(file.type)){ alert("只能选择图片"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ txshow.src = this.result;} }</script></head><body><input type="file" id="fielinput" style="display:none;"><img id="txshow" style="width:100px;height:100px;"/></body></html>
0 0
- JavaScript 通过HTML的FileReader把图片转成base64
- 如何把base64转成图片
- Cache数据库的M语言之把图片转成Base64
- java或jsp中把图片转成Base64编码在转成新的图片
- java或jsp中把图片转成Base64编码在转成新的图片
- HTML input 选择图片转成base64编码
- base64转成图片的方法
- 图片转成base64的字符串, 如何让图片在html中显示
- IE中图片转成base64的示例
- Base64转成图片 损坏的问题
- HTML5 FileReader base64图片预览
- 通过转成Blob文件下载base64图片(兼容IE)
- 图片转成base64串
- 图片转成base64编码
- 将图片转成base64
- 图片转成base64编码
- Jquery 图片转成base64
- html5的FileReader实现图片上传预览并生成base64
- HDU 5506(GT and set)
- 九度OJ 1208:10进制 VS 2进制 (进制转换)
- 会话跟踪 session
- Android怎么让软键盘显示和消失
- 九度OJ 1209:最小邮票数 (遍历)
- JavaScript 通过HTML的FileReader把图片转成base64
- opencv读入图像和avi
- webrc ios 打开h264 硬件编解码
- QT5入门之15 - qr函数
- 端口重定向
- openwrt 常用命令
- Android之Handler详解
- 3.4 Queue via Stacks
- android 如何导出jar包