File、Blob、dataURL 和 canvas 的详解与应用转换

最新推荐文章于 2024-03-15 09:32:27 发布

维多利亚少年-

最新推荐文章于 2024-03-15 09:32:27 发布

阅读量329

点赞数 2

分类专栏： js 文章标签： js canvas blob html

本文链接：https://blog.csdn.net/weixin_45532305/article/details/116784370

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

基本介绍

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 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

在这里插入图片描述

2.相互转换

1. File、Blob 转化成 dataURL

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

// file  e.target.files[0]
function fileToDataURL(file) {
    let reader = new FileReader()
    // 文件转换成dataURL
    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],
        // base64格式的编码——解码
        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')
    canvas.setAttribute('width', document.body.clientWidth)
    canvas.setAttribute('height', document.body.clientheight)
    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
}

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <input type="file" id="upload" accept="image/*">
    <br>
    <img class="imgs" src="" alt="img">
    <br>
    <div class="canvas_content">
        canvas:
    </div>
</body>
<script>
    let upload_dom = document.querySelector('#upload')
    let fileDataURL;
    upload_dom.addEventListener('change', function (e) {
        // console.log(e);
        const file = e.target.files[0]
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function () {
            fileDataURL = reader.result
            document.querySelector('.imgs').src = reader.result
            dataURLToBlob()
        }
    })
     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})
    }
    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.querySelector('.canvas_content').appendChild(canvas)
        img.onload = function() {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
        }
    }

</script>
</html>

在这里插入图片描述

维多利亚少年-

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
File、Blob、dataURL 和 canvas 的详解与应用转换

基本介绍1. File(1) 通常情况下， File 对象是来自用户在一个 input 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。(2) File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比如：FileReader, URL.createObjectURL(), createImageBitmap(),
复制链接

扫一扫

专栏目录