【日常记录】【JS】前端预览图片的两种方式，Base64预览和blob预览

// 方法一：Base64预览
function previewBase64(base64) {
  // 创建一个Image元素
  const img = document.createElement('img');
  // 设置src属性为传入的base64字符串
  img.src = base64;
  // 将图片添加到页面上显示
  document.body.appendChild(img);
}
 
// 方法二：Blob预览
function previewBlob(blob) {
  // 将Blob对象转为URL
  const blobUrl = URL.createObjectURL(blob);
  // 创建一个Image元素
  const img = document.createElement('img');
  // 设置src属性为转换后的URL
  img.src = blobUrl;
  // 将图片添加到页面上显示
  document.body.appendChild(img);
  // 清除URL引用，避免内存泄露
  URL.revokeObjectURL(blobUrl);
}
 
// 示例：假设你有一个Base64编码的图片字符串
const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';
previewBase64(base64String);
 
// 示例：假设你有一个Blob对象表示的图片
const blob = new Blob([arrayBuffer], { type: 'image/png' });
previewBlob(blob);

这段代码展示了如何在前端使用JavaScript进行图片的Base64编码预览和Blob预览。previewBase64函数接收一个Base64编码的字符串，并将其显示在页面上。previewBlob函数接收一个Blob对象，创建一个URL指向该对象，然后在页面上显示图片，最后清除创建的URL以释放内存。