一、 概念介绍
% R" V6 N' s: d+ M0 B% K 1. File , Y+ |3 i- K3 ^9 o/ y
(1) 通常情况下, File 对象是来自用户在一个 input 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象,或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。1 s5 g9 u9 K, R+ H+ d1 w
(2) File 对象是特殊类型的 Blob,且可以用在任意的 Blob 类型的 context 中。比如:FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。
# _# l4 s5 ^) P6 u) E# O 2. Blob ; \5 V4 u5 [+ ]8 o3 r. w
(1) Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。
0 l0 H& v \) d! ^5 R5 U: b (2) Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
; T9 F/ r {8 Q2 l+ ^! N8 s1 l, l7 ` 3. dataURL
$ ^$ |( G4 S" \1 h6 A (1) Data URLs,即前缀为 data: 协议的URL,其允许内容创建者向文档中嵌入小文件。
) P Y6 A5 X( A! r# `7 s. I (2) Data URLs 由四个部分组成:前缀(data:)、指示数据类型的MIME类型、如果非文本则为可选的base64标记、数据本身:data:[][;base64],. K, r s3 I* g3 S5 \
4. canvas
1 u0 j3 d1 T" ~# N (1) Canvas API 提供了一个通过JavaScript 和 HTML的 canvas 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。+ h% `1 K1 g$ p# G+ a# R, t
9 H: l( X4 Z3 i" m- E4 p; N* R 二、相互转化
6 P9 H( M- o6 ]# A 1. File、Blob 转化成 dataURL 7 r1 E9 ?: P0 m8 z2 J) D, p
FileReader 对象允许 Web 应用程序异步读取文件(或原始数据缓冲区)内容,使用 File 或 Blob 对象指定要读取的文件或数据。. J d8 Q k% w7 u) E2 @9 s( F3 i4 E
function fileToDataURL(file) {
let reader = new FileReader()
reader.readAsDataURL(file)
// reader 读取文件成功的回调
reader.onload = function(e) {
return reader.result
}
}
2. dataURL(base64) 转化成 Blob(二进制)对象 0 B) c" ~9 J; P3 G: }8 D
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
9 \6 E. q0 }, k; n // 思路: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
$ K8 F" G% _; {* X2 d) O# X function canvasToDataURL() {
let canvas = document.createElement('canvas')
let canvasDataURL = canvas.toDataURL('image/png', 1.0)
return canvasDataURL
}
三、完整例子 ) y T/ N7 |$ H/ x8 {
可以点击这里在线预览
& @, q2 b. w9 r1 g2 ~6 O" C, f0 |, l3 j
- i9 U. Y( W# r* {' a+ p
<!--
* @information: datadURL File Blob canvas 的互相转化
*
* File.prototype instanceof Blob === true
* Blob.prototype instanceof Object === true
-->
<!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;
/**
* @information: 获取文件
*/
function onChangeInput() {
file = document.getElementById('input').files[0]
console.log('file->', file)
if(!FileReader) {
alert('浏览器版本过低,请升级版本')
return;
}
fileToDataURL()
}
/**
* @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()
}
}
/**
* @information: 图片回显
*/
function showImg() {
let img = document.getElementById('img')
img.src = fileDataURL
}
/**
* @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})
}
/**
* @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()
}
}
/**
* @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>