从图片裁剪聊聊前端二进制
2023-11-10 02:32:06
如何将图片裁剪为二进制数据：一个前端开发者的指南
导言
在前端开发的汪洋大海中，处理二进制数据就像是在湍流中航行。从图片裁剪到文件上传和下载，二进制数据无处不在。因此，作为一名熟练的水手，掌握将二进制数据转换为其他格式的技巧至关重要。
Blob 对象：二进制数据的容器
Blob 对象就像一个神奇的容器，可以容纳二进制数据流。我们可以使用 Blob() 构造函数创建一个 Blob 对象，或者使用 FileReader.readAsBinaryString() 方法将二进制数据转换为 Blob 对象。有了 Blob 对象，我们可以访问其大小、MIME 类型以及对其内容进行分片和流式传输的能力。
FileReader 对象：二进制数据的解读者
FileReader 对象是二进制数据的解密者。它允许我们读取文件或二进制数据，并将它们转换为各种格式。使用 FileReader.readAsArrayBuffer() 方法，我们可以将二进制数据转换为 ArrayBuffer 对象，而 FileReader.readAsBinaryString() 方法则可以将其转换为 Base64 字符串。
URL.createObjectURL() 方法：桥梁构建者
URL.createObjectURL() 方法就像一座桥梁，将 Blob 对象连接到前端世界。它可以将 Blob 对象转换为一个 object URL 对象，使我们能够在前端显示或下载数据。将 object URL 对象赋给 img 标签的 src 属性，一张裁剪好的图片就会出现在你的屏幕上。
实例：图片裁剪的实践
让我们用代码示例来说明图片裁剪的过程。
// 创建一个 FileReader 对象
const reader = new FileReader();
// 将图片裁剪为二进制数据
const canvas = document.getElementById('canvas');
const dataURL = canvas.toDataURL('image/png');
const binaryData = atob(dataURL.split(',')[1]);
// 将二进制数据转换为 Blob 对象
const blob = new Blob([binaryData], { type: 'image/png' });
// 将 Blob 对象转换为 object URL 对象
const objectURL = URL.createObjectURL(blob);
// 在前端显示图片
const img = document.getElementById('img');
img.src = objectURL;
在这个脚本中，我们创建一个 FileReader 对象，裁剪图片并将其转换为二进制数据。然后，我们将二进制数据打包到一个 Blob 对象中，再将 Blob 对象转换为 object URL 对象。最后，我们将 object URL 对象赋给一个 img 标签，让裁剪后的图片在前端展露头角。
结论
掌控了 Blob 对象、FileReader 对象和 URL.createObjectURL() 方法，你就可以轻松地将二进制数据转换为其他格式，在前端世界中畅游自如。从图片裁剪到文件传输，这些技巧将成为你开发工具箱中的利器。
常见问题解答
-
Blob 对象和 ArrayBuffer 对象有什么区别？
Blob 对象存储二进制数据流，而 ArrayBuffer 对象存储二进制数据本身。 -
FileReader 对象可以读取哪些类型的文件？
FileReader 对象可以读取任何类型的文件，包括文本文件、二进制文件和图像文件。 -
URL.createObjectURL() 方法是否可以跨浏览器使用？
URL.createObjectURL() 方法是一个标准的 JavaScript API，可以在所有现代浏览器中使用。 -
如何在前端显示裁剪后的图片？
将 object URL 对象赋给 img 标签的 src 属性即可在前端显示裁剪后的图片。 -
我可以在 Blob 对象中存储哪些类型的数据？
你可以在 Blob 对象中存储任何类型的二进制数据，包括图像、音频、视频和文本。
