不会图片预览？手把手教你两种图片预览方式

前端

2023-11-09 09:32:51

前言

在前端开发中，经常会遇到图片预览的需求，比如在图片上传、图片选择、图片编辑等场景。图片预览可以帮助用户在提交图片之前，先睹为快，从而避免上传不合适的图片。

图片预览的方式有很多种，最常用的有两种：

通过file生成一个base64编码实现预览
实现一个Blob的url地址实现预览

下面，我们将分别介绍这两种图片预览方式。

base64预览

实现原理

base64预览的原理是，将图片文件转换为base64编码，然后将base64编码的图片数据嵌入到HTML代码中，这样浏览器就可以直接显示图片了。

实现步骤

获取图片文件
使用FileReader对象读取图片文件
将图片文件转换为base64编码
将base64编码的图片数据嵌入到HTML代码中

代码示例

<input type="file" id="file-input">

<img id="preview-image">

<script>
  const fileInput = document.getElementById('file-input');
  const previewImage = document.getElementById('preview-image');

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

    const reader = new FileReader();

    reader.onload = () => {
      const base64 = reader.result;

      previewImage.setAttribute('src', `data:image/png;base64,${base64}`);
    };

    reader.readAsDataURL(file);
  });
</script>

Blob预览

实现原理

Blob预览的原理是，将图片文件转换为Blob对象，然后将Blob对象的url地址嵌入到HTML代码中，这样浏览器就可以直接显示图片了。

实现步骤

获取图片文件
使用FileReader对象读取图片文件
将图片文件转换为Blob对象
将Blob对象的url地址嵌入到HTML代码中

代码示例

<input type="file" id="file-input">

<img id="preview-image">

<script>
  const fileInput = document.getElementById('file-input');
  const previewImage = document.getElementById('preview-image');

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

    const reader = new FileReader();

    reader.onload = () => {
      const blob = new Blob([reader.result], { type: 'image/png' });

      const url = URL.createObjectURL(blob);

      previewImage.setAttribute('src', url);
    };

    reader.readAsArrayBuffer(file);
  });
</script>