本地图片的DataURL和BlobURL

2024-01-21 06:09:58

DataURL

DataURL是一种将二进制数据编码为字符串的格式。它通常用于将图像、音频和视频等二进制数据嵌入到HTML或CSS文件中。DataURL由以下几个部分组成：

前缀： 表示数据的MIME类型，例如“data:image/png”
分隔符： 分隔前缀和编码数据
编码数据： 使用Base64编码的二进制数据

DataURL的主要优点是它可以将二进制数据直接嵌入到HTML或CSS文件中，而不需要额外的HTTP请求。这使得它非常适合用于嵌入小型图像和图标。然而，DataURL也有一个缺点，那就是它会增加HTML或CSS文件的体积。

BlobURL

BlobURL是一种将Blob对象转换为URL的格式。Blob对象是代表二进制数据的对象，它可以由文件、ArrayBuffer或其他二进制数据创建。BlobURL的主要优点是它可以将Blob对象转换为一个URL，该URL可以直接在浏览器中打开或下载。这使得它非常适合用于预览本地图片。

本地图片预览

现在我们了解了DataURL和BlobURL，我们就可以开始讨论如何使用它们来预览本地图片了。

使用DataURL预览本地图片

以下是如何使用DataURL预览本地图片的步骤：

创建一个文件输入元素
监听文件输入元素的change事件
使用FileReader对象读取文件
将FileReader对象的result属性转换为DataURL
将DataURL设置到图像元素的src属性

以下是一个使用DataURL预览本地图片的示例代码：

const input = document.getElementById('image-input');

input.addEventListener('change', function() {
  const file = input.files[0];

  const reader = new FileReader();

  reader.onload = function() {
    const dataURL = reader.result;

    const image = document.getElementById('image');

    image.src = dataURL;
  };

  reader.readAsDataURL(file);
});

使用BlobURL预览本地图片

以下是如何使用BlobURL预览本地图片的步骤：

创建一个文件输入元素
监听文件输入元素的change事件
使用FileReader对象读取文件
将FileReader对象的result属性转换为Blob对象
使用URL.createObjectURL()方法将Blob对象转换为BlobURL
将BlobURL设置到图像元素的src属性

以下是一个使用BlobURL预览本地图片的示例代码：

const input = document.getElementById('image-input');

input.addEventListener('change', function() {
  const file = input.files[0];

  const reader = new FileReader();

  reader.onload = function() {
    const blob = new Blob([reader.result]);

    const blobURL = URL.createObjectURL(blob);

    const image = document.getElementById('image');

    image.src = blobURL;
  };

  reader.readAsArrayBuffer(file);
});