美文网首页
图片处理

图片处理

作者: cherubic_c | 来源:发表于2018-09-03 14:19 被阅读0次

    图片流

    前端所说的图片流就是读取本地图片,并在页面使用文件流的方式显示出来。

    首先,我们简单说下文件上传的几种方式

    上传方式

    input

    通过用户点击,创建<input type="file" accept="image/*"/>,并监听change事件获取file对象,大体如下

    click = () => {
        let input = document.createElement('input')
        input.setAttribute('type', 'file')
        input.setAttribute('accept', 'image/*')
        
        input.onchange = event => {
            let file = event.target.files[0]
        }
        
        input.click()
        
    } 
    

    Drag && drop

    使用HTML5的拖放API,监听元素的drop事件,同样是获取file对象

    会创建一个DataTransfer对象,下面我们还会遇到它,稍后再说

    dragover = event => {
       event.preventDefault()
    }
    
    drop = event => {
        event.preventDefault()
        let files =  event.dataTransfer.files
    }
    

    paste

    给元素绑定粘贴事件,得益于contenteditable我们可以给所有元素添加,涛声依旧,获取event中包含的file

    paste = (e) => {
        e.preventDefault()
        let file = e.clipboardData.files[0]
    }
    

    clipboardData

    paste事件提供了一个clipboardData属性,是一个DataTransfer类型的对象,前面我们说到,拖放会产生一个DataTransfer对象,没错,粘贴也是它。

    来来来,掀起了她的盖头来。

    01.jpg

    上面可以看到,clipboardData有如下属性

    • dropEffect 默认是node
    • effectAllowed 默认是uninitialized
    • files 本地文件列表
    • items 剪切板中的各项数据
    • types 剪切板中的各项数据类型

    我们只需要使用files即可,图片文件在它里面

    文件格式

    file

    通常情况下, File 对象是来自用户在一个<input>元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的DataTransfer对象,继承于Blob

    庐山真面目,诺,就是这个样子。

    02.jpg

    可以看到有如下属性:

    • name:文件名,该属性只读。
    • size:文件大小,单位为字节,该属性只读。
    • type:文件的 MIME 类型,如果分辨不出类型,则为空字符串,该属性只读。
    • lastModified:文件的上次修改时间,格式为时间戳。
    • lastModifiedDate:文件的上次修改时间,格式为 Date 对象实例。

    我们不去深究file对象,只需要知道通过它可以访问本地的文件。

    blob

    一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob,继承 blob功能并将其扩展为支持用户系统上的文件。

    创建blob对象

    var aBlob = new Blob( array, options );
    
    • array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob.

    • options 是一个可选的Blob熟悉字典,它可能会指定如下两种属性

      • type,默认值为 “”,它代表了将会被放入到blob中的数组内容的MIME类型。

      • endings,默认值为”transparent”,它代表包含行结束符\n的字符串如何被输出。

    var a = ["hello", "world"];
    var myBlob = new Blob(a, { "type" : "text/xml" });
    console.log(myBlob);
    
    03.jpg

    通过动态创建blob,我们可以实现纯前端下载

    const foo = {hello: "world"};
    const blob = new Blob([JSON.stringify(foo)], {type: "text/plain"});
    const fileName = `${new Date().valueOf()}.doc`;
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
    window.URL.revokeObjectURL(link.href);
    

    Blob URL

    Blob URL是blob协议的URL,格式如下

    blob:http://localhost:1234/946644c4-ca98-405e-918c-759e790d0330
    

    Blob URL可以通过URL.createObjectURL(blob)创建, 在每次调用createObjectURL()方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。

    在不需要这些URL对象的时候, 通过URL.revokeObjectURL(objectURL) 释放URL对象

    使用Blob URL进行显示本地图片,我们只需要把创建的URL赋值给img的src属性就可以了。

    05.jpg

    FileReader

    FileReader用来读取file或blob文件数据,基于文件大小不同,读取的过程为异步。

    let render = new FileReader()
    render.onload = () => {
        let src = render.result
    }
    render.readAsDataURL(file)
    

    FileReader读取文件方法

    • readAsBinaryString file 将文件读取为二进制编码

    • readAsBinaryArray file 将文件读取为二进制数组

    • readAsText file[, encoding] 按照格式将文件读取为文本,encode默认为UTF-8

    • readAsDataURL file 将文件读取为DataUrl

    base64

    使用FileReader进行文件的读取,就可以将图片读取成base64格式的了。

    04.jpg

    直接在FileReader实例的onload函数里面将result赋值给src即可

    格式差异

    其实主要是两种格式base64和blob,它们之间的差异如下

    • Blob URL的长度一般比较短

    • Blob URL可以方便的使用XMLHttpRequest获取源数据, base64不是所有浏览器都支持

    • Blob URL 只能在当前应用内部使用

    格式之间转换

    canvas转为blob对象

    canvas.toBlob(function (blobObj) {
        console.log(blobObj)
    })
    

    canvas转为base64

    let imgSrc = canvas.toDataURL('image/png')
    

    base64转为blob

    function dataURLtoBlob(dataurl) {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
    
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
    
      return new Blob([u8arr], { type: mime });
    }
    
    

    相关文章

      网友评论

          本文标题:图片处理

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