js前端技巧之图片格式转换(File、Blob、base64)

JS前端技巧之图片格式转换攻略

什么是图片格式转换？

图片格式转换是将一种图片格式转换成另一种图片格式的过程。在前端开发中，常见的图片格式有JPEG、PNG、GIF等。图片格式转换可以实现以下需求：

• 上传图片格式限制：例如要求用户上传的头像只能是JPEG格式。
• 图片压缩：将大尺寸的图片转换为小尺寸的图片，降低图片占用的存储空间和带宽资源。
• 图片处理：例如将图片转为灰度图或在图片上添加水印等。

File、Blob和base64是什么？

在图片格式转换中，我们常用三种数据类型：File、Blob和base64。

File

File对象是HTML5中新增的API，它表示一个文件，通常用于用户上传文件时使用。File对象包含了文件的元数据信息(文件名、文件大小、最后修改时间等)以及文件的实际内容。我们可以通过FileReader来读取File对象中的内容。

Blob

Blob是二进制大对象的缩写，表示一个二进制数据对象。Blob对象可以是文件内容的部分或者全部。Blob对象的数据通常来自于以下内容：

• 通过原始的二进制数据。
• 通过File对象的slice方法从大文件中裁剪出小的Blob对象。
• 从一个数组或者字符串中创建Blob对象。

base64

base64是一种编码方式，它将二进制数据转换为文本数据，可用于在HTTP协议等中传递二进制数据。在图片格式转换中，我们常用base64来表示一个图片文件，其格式为"data:image/png;base64,iVBORw0KG......"。

实现图片格式转换的方法

下面分别介绍如何使用File、Blob和base64来实现图片格式转换。

使用File对象

• 将图片文件从File类型转为Blob类型

//定义一个input元素
<input type="file" id="inputFile">

//获取input元素的文件
let file = document.getElementById('inputFile').files[0];

//将File类型转为Blob类型
let blob = file.slice(0,file.size,file.type);

• 将图片文件从File类型转为Base64类型

//定义一个input元素
<input type="file" id="inputFile">

//获取input元素的文件
let file = document.getElementById('inputFile').files[0];

//使用FileReader进行读取
let fr = new FileReader();
fr.readAsDataURL(file);
//读取完成调用函数
fr.onload = function() {
  //获取读取完成的源数据（base64字符串）
  let base64Str = this.result;
  console.log(base64Str);
}

使用Blob对象

• 将图片从Blob类型转为File类型

//获取一张图片
let img = document.getElementsByTagName('img')[0];

//将图片转为Blob类型
let blob = new Blob([img.src],{type: 'image/png'});

//创建一个File对象
let file = new File([blob],'demo.png',{type: 'image/png'});

使用base64

• 将图片从base64类型转为Blob类型

//定义base64字符串
let base64Str = 'data:image/png;base64,iVBORw0KG......';

//使用atob将base64字符串转为Byte数组
let byteArr = atob(base64Str.split(',')[1]).split('').map((item) => { return item.charCodeAt(0)});

//将Byte数组转为Uint8Array数组
let uint8 = new Uint8Array(byteArr);

//创建Blob对象
let blob = new Blob([uint8],{type:'image/png'});

总结

本文介绍了前端图片格式转换的三种方式：File、Blob、base64。对于不同的需求，可以根据实际情况选择不同的方式来实现。同时，通过本文的示例代码，也可以更好地理解和掌握这些API的使用。