1. JS版base64获取
html代码
<body>
<input type="file" id="myFile" onchange="sub()" />
</body>
JS代码
<script type="text/javascript">
function sub(){
var myFile = document.getElementById("myFile").files[0];
var fileRead = new FileReader();
fileRead.readAsDataURL(myFile);
fileRead.onload = function(e){
var base64 = e.target.result;
var img = new Image();
img.src = base64;
document.getElementsByTagName("body")[0].appendChild(img);
}
}
</script>
解释：
- var myFile = document.getElementById("myFile").files[0];
.files[0] 获取 在input上传的图片 -
var fileRead = new FileReader();
HTML5 定义了 FileReader 作为文件API的重要成员用于读取文件，根据W3C的定义FileReader接口提供了读取文件的方法和包含读取结果的事件模型
new FileReader的实例有4个方法
new FileReader
-
readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
-
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
-
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
-
fileRead.readAsDataURL(myFile);
FileReader随想的readAsDataURL方法可以将读取到的文件编码成Data URL，Data URL是一项特殊技术，可以讲资料（图片）内嵌在网页之中，不用放在外部文件。使用Data URL的好处是，不需要额外的发送一个HTTP请求到服务器端取得的额外资料，缺点是，网页的大小可能会变大，它适合应用在内嵌小图片。 -
fileRead.onload = function(e)中的e
如下图所示，e是一个对象，e.target.result就是我们想获取的上传图片转化为的base64
image.png
-
var img = new Image();
最后我们创建一个img图片，将img的src设置成我们获取到的base64
2. canvas版base64获取
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<button onclick="sub()">点击</button>
</body>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.fillStyle = "red";
context.fillRect(100,100,100,100);
function sub(){
var base64 = canvas.toDataURL();
console.log(base64)
var img = new Image();
img.src = base64;
document.getElementsByTagName("body")[0].appendChild(img);
}
</script>
解释：
- canvas.toDataURL()
FileReader对象也有类似的方法，比如.readAsDataURL()，然而它只接受file或blob类型，而这两种类型一般只能通过<input[type=file]>元素的files属性获取，或者用Blob()构造函数手工创建一个新的对象。尴尬的是我们当前只有图片路径，受制于浏览器的安全策略，<input[type=file]>的files属性是只读的，而Blob()构造函数只接受文件内容，两种方式都无法通过图片路径直接获取。上文中假设的应用场景迫使我们必先考虑如何通过路径获取到图片内容。<img>是可以的，并且可以被绘制到<canvas>中，而<canvas>正巧拥有.toDataURL()方法。
网友评论