JavaScript 通过HTML的FileReader把图片转成base64

刚接触到一个内联图片的概念，内联图片即使把图片文件编码成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>

JavaScript 通过HTML的FileReader把图片转成base64相关推荐

html5将图片转换成base64的实例代码
这篇文章给大家介绍了如何利用html5将图片转换成base64,文中通过示例代码介绍的很详细,有需要的朋友们可以参考借鉴. base64编码介绍 base64是一种网络上常用的8bit字节代码的编码方 ...
php将上传的图片转为base64,html5实现把上传的图片转成base64编码在显示（代码实例）...
本章给大家介绍html5实现把上传的图片转成base64编码在显示(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来详细的看一看base64编码: 什么是bas ...
html本地路径图片转成base64,canvas-toDataURL()将图片转为dataURL（base64）
将图片转为base64的好处将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地 ...
JAVA解析html文档，替换img图片路径成base64编码，并将文章存入数据库
转载自 JAVA解析html文档,替换img图片路径成base64编码,并将文章存入数据库开发环境:struts2+ spring + hibernate 数据库:oracle 需求:在HTML编 ...
elementUI压缩图片和将图片转成base64格式
为了降低资源服务器的消耗.有些时候需要前端压缩图片,转码等一些处理. 一.Base64的优点和缺点图片转换成base64格式的优缺点 1. 优点 (1)base64格式的图片是文本格式,占用内存小, ...
js将图片转换成base64
之前有个需求是把页面绘制成图片,上传到服务器中,我使用的 html2canvas .但是html页面当中含有图片,如果图片地址非本页面域名,在截图时就会存在跨域问题,导致截图失败.经过多方查找,发现把 ...
HTML怎么转换base64教程,html5将图片转换成base64代码
我们为什么要把图片转换成base64代码? base64是一种网络上常用的8bit字节代码的编码方式,base64可以用于http环境下传递较长的标识信息,同时可以放在url当中使用,因为base64 ...
java图片转换成base64_Java将图片转换成Base64字符串
public classImageUtil {/*** 本地图片转换成base64字符串 *@paramimgFile * 图片本地路径 *@return */ public static Strin ...
java实现将图片读取成base64字符串，将base64字符串存储为图片。
全栈工程师开发手册 (作者:栾鹏) java教程全解 java实现将图片读取成base64字符串 ,将base64字符串存储为图片. 将图片转化为字符串以后,由于字符串更方便在网络上通过ajax传输. ...

JavaScript 通过HTML的FileReader把图片转成base64

JavaScript 通过HTML的FileReader把图片转成base64相关推荐

最新文章

热门文章