前端二进制学习(二)

2018年12月05日Web前端0

紧接着前端二进制学习(一),继续学习前端中有关二进制的接口。

一、base64编解码接口

当用到base64编解码时,通常我们会引入第三方的库,其实高版本的浏览器已经内置了这两个接口了。

window.atob():base64解码,ASCII转base64编码。 window.btoa():base64转码,base64转ASCII,参数是一个字符串, 其字符分别表示要编码为 ASCII 的二进制数据的单个字节。 因为有限制,所以无法转化中文。

此时需要将中文转化掉,想到了浏览器提供的另外几个方法,是不是可以使用window.encodeURIComponent和window.decodeURIComponent配合使用呢?

了解下兼容性,IE9居然还不行。

二、FileReader

在前端二进制学习(一)中blob转base64时,就用到了FileReader这个函数,我们来了解下。

看下MDN文档的解释:FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

File和Blob前面我们已经讲过了,现在配合使用FileReader来操作数据。 我们通过构造函数初始化一个FileReader对象:

var reader = new FileReader();

FileReader事件函数

在控制台中,我们看下这些事件:

  • onabort(),中断时触发。
  • onerror(),出错时触发。
  • onload(),文件读取成功完成时触发。
  • onloadend(),读取完成触发,无论成功或失败。
  • onloadstart(),读取开始时触发。
  • onprogress(),读取中触发。

那我们又是如何取读取文件呢?再看下FileReader上的构造函数,

这四个用于读取文件的,

  • readAsArrayBuffer(),将文件读取为ArrayBuffer。
  • readASBinaryString(),将文件读取为二进制编码。
  • readAsDataURL(),将文件读取为DataURL。
  • readAsText(),将文件读取为文本。

还有个用于中断文件读取的接口:

  • abort(),中断读取。

我们换一种方式读取图片并显示到网页上(前面我们使用createObjectURL方法):

<input type="file" name="" id="file" />

<img src="" id="img"/>
document.getElementById('file').onchange = function(e) {
    if (!this.files.length) {
        return;
    }
    var oImage = document.getElementById('img');
    var reader = newFileReader();
    
    reader.readAsDataURL(this.files[0]);
    reader.onload = function (e) 
        oImage.src = e.target.result; // base64的数据结果
    }
}

这样同样可以将本地图片读到web上显示。和前面说到的blobToDataURL的方法相似。

FileReader的兼容性:

接下来去学习下arraybuffer等其他知识:二进制学习(三)