【JS】1001- File、Blob、dataURL 和 canvas 的应用与转换

谁借莪１个温暖的怀抱￠ 2022-10-10 11:16 100阅读 0赞

![89103fb988a464ddfc40e0563d6a5a57.png][]

> 本文作者：卡布奇诺o
> 
> 本文链接：https://www.cnblogs.com/Faith-Yin/p/14036049.html

## 一、 概念介绍 ##

### 1. File ###

(1) 通常情况下， File 对象是来自用户在一个 input 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。

(2) File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比如：FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

### 2. Blob ###

(1) Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

(2) Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

### 3. dataURL ###

(1) Data URLs，即前缀为 data: 协议的URL，其允许内容创建者向文档中嵌入小文件。

(2) Data URLs 由四个部分组成：前缀(data:)、指示数据类型的MIME类型、如果非文本则为可选的base64标记、数据本身：data:\[\]\[;base64\],

### 4. canvas ###

(1) Canvas API 提供了一个通过JavaScript 和 HTML的 canvas 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

![35166972ce6390e0a3e48228c75febc2.png][]文件格式转换关系图

## 二、相互转化 ##

### 1. File、Blob 转化成 dataURL ###

> FileReader 对象允许 Web 应用程序异步读取文件(或原始数据缓冲区)内容，使用 File 或 Blob 对象指定要读取的文件或数据。

function fileToDataURL(file) {
        let reader = new FileReader()
        reader.readAsDataURL(file)
        // reader 读取文件成功的回调
        reader.onload = function(e) {
          return reader.result
        }
    }

### 2. dataURL(base64) 转化成 Blob(二进制)对象 ###

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

### 3. File, Blob 文件数据绘制到 canvas ###

// 思路：File, Blob ——> dataURL ——> canvas
     
    function fileAndBlobToCanvas(fileDataURL) {
        let img = new Image()
        img.src = fileDataURL
        let canvas = document.createElement('canvas')
        if(!canvas.getContext) {
          alert('浏览器不支持canvas')
          return;
        }
        let ctx = canvas.getContext('2d')
        document.getElementById('container').appendChild(canvas)
        img.onload = function() {
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
        }
    }

### 4. 从 canvas 中获取文件 dataURL ###

function canvasToDataURL() {
        let canvas = document.createElement('canvas')
        let canvasDataURL = canvas.toDataURL('image/png', 1.0)
        return canvasDataURL
    }

## 三、完整栗子 ##

> 可以点击 这里 : http://8.131.67.8:8088/file.html 在线预览

![a68ba8ce7388b5e6ddc8e2df8f387773.png][] img

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>datadURL File Blob canvas</title>
      <style>
        .body {
          text-align: center;
        }
        .img-box {
          margin: 20px 0;
        }
        #img {
          width: 60%;
        }
      </style>
    </head>
    <body>
      
      <div class="body">
     
        <div class="input-box">
          <input id="input" type="file" accept="image/png, image/jpeg" onchange="onChangeInput()">
        </div>
        
        <div class="img-box">
          img: 
          <img src="" alt="img" id="img">
        </div>
     
        <div class="canvas-box" id="canvas-box">
          canvas: 
        </div>
     
      </div>
     
     
    <script>
      // 文件对象
      let file; 
      // 文件 base64 码
      let fileDataURL;
     
     
      /**
       * @Date: 2020-11-25 10:32:51
       * @information: 获取文件
       */
      function onChangeInput() {
        file = document.getElementById('input').files[0]
        console.log('file->', file)
        if(!FileReader) {
          alert('浏览器版本过低，请升级版本')
          return;
        }
        fileToDataURL()
      }
      
      /**
       * @Date: 2020-11-25 10:31:47
       * @information: 使用 FileReader 读取文件内容， File(二进制) ——> dataURL(base64)   Blob ——> dataURL 同理
       */
      function fileToDataURL() {
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function(e) {
          console.log('dataURL->', reader.result)
          fileDataURL = reader.result
          showImg()
          dataURLToBlob()
        }
      }
     
      /**
       * @Date: 2020-11-25 10:33:13
       * @information: 图片回显
       */
      function showImg() {
        let img = document.getElementById('img')
        img.src = fileDataURL
      }
     
      /**
       * @Date: 2020-11-25 10:34:47
       * @information: dataURL(base64) ——> Blob(二进制)对象
       */
      function dataURLToBlob() {
        let arr = fileDataURL.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while(n --) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        console.log('blob->', new Blob([u8arr], {type: mime}))
        fileAndBlobToCanvas()
        return new Blob([u8arr], {type: mime})
      }
     
      /**
       * @Date: 2020-11-25 10:53:31
       * @information: File, Blob 文件数据绘制到 canvas
       * 思路：File, Blob ——> dataURL ——> canvas
       */
      function fileAndBlobToCanvas() {
        let img = new Image()
        img.src = fileDataURL
        let canvas = document.createElement('canvas')
        if(!canvas.getContext) {
          alert('浏览器不支持canvas')
          return;
        }
        let ctx = canvas.getContext('2d')
        document.getElementById('canvas-box').appendChild(canvas)
        img.onload = function() {
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
          canvasToDataURL()
        }
      }
     
      /**
       * @Date: 2020-11-25 11:23:54
       * @information: 从 canvas 中获取文件 dataURL 
       */
      function canvasToDataURL() {
        let canvas = document.createElement('canvas')
        let canvasDataURL = canvas.toDataURL('image/png', 1.0)
        console.log('从 canvas 中获取文件 dataURL :', canvasDataURL)
      }
     
    </script>
     
    </body>
    </html>

![9ef69cccdc3077a4954df54cab284b8a.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![4910c99162d0daf3ce1b6b95c2cb810e.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[89103fb988a464ddfc40e0563d6a5a57.png]: /images/20221005/39ef0496011943b2861393323524f5f4.png
[35166972ce6390e0a3e48228c75febc2.png]: /images/20221005/87b5ac49315643f4a02ffaefcb3c4776.png
[a68ba8ce7388b5e6ddc8e2df8f387773.png]: /images/20221005/6f7cb8541e9c4b96ab9982f3118d6230.png
[9ef69cccdc3077a4954df54cab284b8a.gif]: /images/20221005/184faa6822924994976fb80252a3c91b.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[4910c99162d0daf3ce1b6b95c2cb810e.gif]: /images/20221005/f1bcd4b122634eb0971ae1b2ff70712e.png