05Blob

作者: 我_巨可爱 | 来源:发表于2017-11-07 16:01 被阅读0次

    Blob是一种不可变的类似文件对象的原始数据

    相关知识

    1. URL.createObjectURL()
    2. FileReader
    3. ArrayBuffer

    介绍

    1. fetch请求图片时,接触了response.blob(),将响应数据转化成Blob
    2. 将其他非Blob对象和数据构造一个Blob,请使用构造函数

    构造函数,属性,方法

    构造函数

    var aBlob = new Blob( array, options )

    1. 其中array可以是由 ArrayBufferArrayBufferViewBlobDOMString组成的数组
    2. options
    • type,代表了将会被放入到blob中的数组内容的MIME类型
    • ending,指定包含行结束符\n的字符串如何被写入

    ArrayBuffer对象被用来表示一个通用的,固定长度的二进制数据缓冲区

    属性

    这两个属性,是 Blob 类的

    1. size
    2. type属性,一个字符串,表示该Blob对象所包含数据的MIME类型。如果类型未知则为空字符串

    方法

    1. slice(start,end,contentType)

    示例

    // 使用字符串构建一个 blob
    var debug = {hello: 'world'};
    var blob = new Blob([JSON.stringify(debug,null,2)],{type:'application/json'});
    
    1. JSON.stringify(value,replacer,space)
    • value一个有效的JSON字符串
    • replacer用于转换结果的函数或者数组
    • space ,为文本添加缩进。如果space是数字,将在每个级别的缩进指定数目的空格
    // 使用Blob创建一个指向类型数组的URL
    var typeArray = GetTheTypedArraySomehow();
    var blob = new Blob([typeArray],{type:"application/octet-binary"});
    var url = URL.createObjectURL(blob);
    
    1. 创建一个blob
    2. 使用URL.createObjectURL()产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf的字符串,可以像普通URL那样使用它。比如在img.src

    从 Blob 中提取数据

    从 Blob 对象中读取内容的唯一方法是FileReader,文件读取对象定义有针对 Blob 的方法

    1. 通过其他方法可以把Blob读取为字符串或者data URL
    // 第一步
    var reader = new FileReader();
    // 第三部
    reader.addEventListener('loadend',function () {
        // reader.result  将blob读取成一个`ArrayBuffer`
    })
    // 第二步
    reader.readerAsArrayBuffer(blob);
    

    总结

    1. blob可以在读取图片时使用,结合URL.createObjectURL产生类似URL的地址,直接使用
    2. 使用fileReader的方法,读取blob

    相关文章

      网友评论

          本文标题:05Blob

          本文链接:https://www.haomeiwen.com/subject/xjejmxtx.html