前端二进制相关知识点总结之图片篇（二）
前端二进制相关知识点总结之图片篇（二）
- 前言
- 一、图片灰度化
-
- 1. getImageData 方法
- 2. putImageData 方法
- 3. 图片灰度化处理
- 二、图片压缩
- 三、图片上传
- 四、图片相关的知识点总结
-
- 1. 如何区分图片的类型
- 2. 如何获取图片的尺寸
- 3. 如何实现大文件分片上传
- 4. 如何实现文件下载
- 总结
前言
再了解了 Blob、Blob URL、Base64、Data URL、ArrayBuffer、TypedArray、DataView 之间的关系后，我们再来了解一下关于图片灰度化，压缩 和 上传 的知识点。
一、图片灰度化
要对图片进行灰度化处理，就需要操作图片像素数据。那么问题来了，我们应该如何获取图片的像素数据呢？
1. getImageData 方法
针对上述问题，我们可以利用 CanvasRenderingContext2D 提供的 getImageData 来获取图片像素数据；其中 getImageData() 返回一个 ImageData 对象，用来描述 canvas 区域隐含的 像素数据 ，这个区域通过矩形表示，起始点为 （sx, sy） 、宽为 sw 、高为 sh 。
语法：
ctx.getImageData(sx, sy, sw, sh);
参数说明：
- sx ：将要被提取的图像数据矩形区域的左上角 x 坐标；
- sy ：将要被提取的图像数据矩形区域的左上角 y 坐标；
- sw ：将要被提取的图像数据矩形区域的宽度；
- sh ：将要被提取的图像数据矩形区域的高度。
2. putImageData 方法
在获取到图片的像素数据之后，就可以对获取的像素数据进行处理，比如进行灰度化或反色处理。当完成处理后，若要在页面上显示处理效果，则我们需要利用 CanvasRenderingContext2D 提供的另一个 API —— putImageData。
该 API 是 Canvas 2D API 将数据从已有的 ImageData 对象绘制到位图的方法。
语法：
ctx.putImageData(imagedata, dx, dy);
ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
参数说明：
- imageData ： ImageData ，包含像素值的数组对象；
- dx ：源图像数据在目标画布中的 x 轴方向的偏移量；
- dy ：源图像数据在目标画布中的 y 轴方向的偏移量；
- dirtyX ：可选，在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（x 坐标）。
- dirtyY ：可选，在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（y 坐标）。
- dirtyWidth ：可选，在源图像数据中，矩形区域的宽度。默认是图像数据的宽度。
- dirtyHeight ：可选，在源图像数据中，矩形区域的高度。默认是图像数据的高度。
3. 图片灰度化处理
利用 getImageData() 和 putImageData() 方法， 实现图片灰度化：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>获取远程图片并灰度化</title>
</head>
<body>
<h3>获取远程图片并灰度化示例</h3>
<div>
<button id="grayscalebtn">灰度化</button>
<div style="display: flex;">
<div style="flex: 50%;">
<p>预览容器</p>
<img
id="previewContainer"
width="230"
height="230"
style="border: 2px dashed blue;"
/>
</div>
<div style="flex: 50%;">
<p>Canvas容器</p>
<canvas
id="canvas"
width="230"
height="230"
style="border: 2px dashed grey;"
></canvas>
</div>
</div>
</div>
<script>
const image = document.querySelector("#previewContainer");
const canvas = document.querySelector("#canvas");
// 远程图片预览
fetch("https://s.yimg.com/ut/api/res/1.2/wc8Y6ZMRPK6k0ucegJ2J5Q--~B/YXBwaWQ9eXR3bWFsbDtjYz0zMTUzNjAwMDtoPTYwMDtxPTEwMDt3PTYwMA--/https://s.yimg.com/fy/8236/item/p0265120751355-item-ebbbxf4x0800x0800-m.jpg")
.then((response) => response.blob())
.then((blob) => {
const objectURL = URL.createObjectURL(blob);
image.src = objectURL;
image.onload = () => {
draw();
};
});
// 把获取的图像绘制到页面的 Canvas 容器中
function draw() {
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, 230, 230);
// 通过 ctx.getImageData() 方法获取的图片，便于在grayscale函数中 图片像素进行灰度化处理
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// 图片灰度化
const grayscale = function (data) {
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg; // red
data[i + 1] = avg; // green
data[i + 2] = avg; // blue
}
// 处理完成后，通过 ctx.putImageData() 方法把处理过的像素数据更新到 Canvas 上
ctx.putImageData(imageData, 0, 0);
};
// 按钮绑定监听事件
const grayscalebtn = document.querySelector("#grayscalebtn");
grayscalebtn.addEventListener("click", grayscale);
}
</script>
</body>
</html>
页面初始化效果：
点击 “灰度化”按钮后效果：
ImageData：
二、图片压缩
在一些场合中，我们希望在上传本地图片时，先对图片进行一定的压缩，然后再提交到服务器，从而减少传输的数据量。在前端要实现图片压缩，我们可以利用 Canvas 对象提供的 toDataURL() 方法，该方法接收 type 和 encoderOptions 两个可选参数。
语法：
canvas.toDataURL(type, encoderOptions);
参数说明：
- type： 表示图片格式，默认为 image/png ；
- encoderOptions ：表示图片的质量，在指定图片格式为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92，其他参数会被忽略。
示例：
/* 添加压缩后的图片预览容器 */
<div style="flex: 33.3%;">
<p>压缩预览容器</p>
<img id="compressPrevContainer" width="230" height="230" style="border: 2px dashed green;" />
</div>
const compressbtn = document.querySelector("#compressbtn");
const compressImage = document.querySelector("#compressPrevContainer");
compressbtn.addEventListener("click", compress);
// 图片压缩
function compress(quality = 80, mimeType = "image/webp") {
const imageDataURL = canvas.toDataURL(mimeType, quality / 100);
compressImage.src = imageDataURL;
}
在以上代码中，我们设默认的图片质量是 0.8 ，而图片类型是 image/webp 类型。当用户点击压缩按钮时，则会调用 Canvas 对象的 toDataURL() 方法实现图片压缩。
最终的处理效果：
其实 Canvas 对象除了提供 toDataURL() 方法之外，它还提供了一个 toBlob() 方法。
语法：
canvas.toBlob(callback, mimeType, qualityArgument)
和 toDataURL() 方法相比，toBlob() 方法是 异步 的，因此多了个 callback 参数，这个 callback 回调方法默认的第一个参数就是转换好的 blob文件信息。
三、图片上传
在获取压缩后图片对应的 Data URL 数据之后，可以把该数据直接提交到服务器。针对这种情形，服务端需要做一些相关处理，才能正常保存上传的图片。
这里以 Express 为例，具体处理代码如下：
const app = require('express')();
app.post('/upload', function(req, res){
// 获取POST请求中的base64图片数据
let imgData = req.body.imgData;
let base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
let dataBuffer = Buffer.from(base64Data, 'base64');
fs.writeFile("melod.jpg", dataBuffer, function(err) {
if(err) {
res.send(err);
}else {
res.send("图片上传成功！");
}
});
});
然而对于返回的 Data URL 格式的图片数据一般都会比较大，为了进一步减少传输的数据量，我们可以把它转换为 Blob 对象：
function dataUrlToBlob(base64, mimeType) {
let bytes = window.atob(base64.split(",")[1]);
let buffer = new ArrayBuffer(bytes.length);
let uin8 = new Uint8Array(buffer);
for (let i = 0; i < bytes.length; i++) {
uin8[i] = bytes.charCodeAt(i);
}
return new Blob([buffer], { type: mimeType });
}
在转换完成后，我们就可以压缩后的图片对应的 Blob 对象封装在 FormData 对象中，然后再通过 AJAX 提交到服务器上：
function uploadFile(url, blob) {
let formData = new FormData();
let request = new XMLHttpRequest();
formData.append("imgData", blob);
request.open("POST", url, true);
request.send(formData);
}
四、图片相关的知识点总结
1. 如何区分图片的类型
计算机并不是通过图片的后缀名来区分不同的图片类型，而是通过 “魔数”（Magic Number）来区分。 对于某一些类型的文件，起始的几个字节内容都是固定的，根据这几个字节的内容就可以判断文件的类型。
常见图片类型对应的魔数如下表所示：
| 文件类型 | 文件后缀 | 魔数 |
|---|---|---|
| JPEG | jpg/jpeg | 0xFFD8FF |
| PNG | png | 0x89504E47 |
| GIF | gif | 0x47494638（GIF8） |
| BMP | bmp | 0x424D |
在日常开发过程中，如果遇到检测图片类型的场景，可以直接利用一些现成的第三方库。比如，想要判断一张图片是否为 PNG 类型，这时你可以使用 is-png 这个库，它同时支持浏览器和 Node.js。
2. 如何获取图片的尺寸
图片的尺寸、位深度、色彩类型和压缩算法都会存储在文件的二进制数据中。
如果想要获取图片的尺寸，就需要依据不同的图片格式对图片二进制数据进行解析。可以通过 image-size 这个 Node.js 库实现了获取主流图片类型文件尺寸的功能。
3. 如何实现大文件分片上传
File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的上下文中。所以针对大文件传输的场景，我们可以使用 slice 方法对大文件进行切割，然后分片进行上传，具体示例如下：
const file = new File(["a".repeat(1000000)], "test.txt");
const chunkSize = 40000;
const url = "https://httpbin.org/post";
async function chunkedUpload() {
for (let start = 0; start < file.size; start += chunkSize) {
const chunk = file.slice(start, start + chunkSize + 1);
const fd = new FormData();
fd.append("data", chunk);
await fetch(url, { method: "post", body: fd }).then((res) =>
res.text()
);
}
}
4. 如何实现文件下载
在一些场景中，我们会通过 Canvas 进行图片编辑或使用 jsPDF、sheetjs 等一些第三方库进行文档处理，当文件文件处理完成后，我们需要把文件下载并保存到本地。针对这些场景，我们可以使用纯前端的方案实现文件下载。
一个简单的 Blob 文件下载的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Blob 文件下载示例</title>
</head>
<body>
<button id="downloadBtn">文件下载</button>
<script>
// 下载
const download = (fileName, blob) => {
// 动态创建 a 标签
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
link.remove();
URL.revokeObjectURL(link.href);
};
const downloadBtn = document.querySelector("#downloadBtn");
downloadBtn.addEventListener("click", (event) => {
// 对下载文件命名
const fileName = "blob.txt";
// 创建下载对象，类型为 text/plain
const myBlob = new Blob(["我是内容我是内容我是内容"], { type: "text/plain" });
download(fileName, myBlob);
});
</script>
</body>
</html>
页面效果：
在示例中，通过调用 Blob 的构造函数来创建类型为 “text/plain” 的 Blob 对象，然后通过动态创建 a 标签来实现文件的下载。在实际项目开发过程中，我们可以使用成熟的开源库，比如 FileSaver.js 来实现文件保存功能。
总结
博客转载自: 玩转前端二进制链接