【JS】web端实现图片生成缩略图，纯js函数实现

本文链接：https://blog.csdn.net/sky529063865/article/details/130261981

该文章介绍了一个JavaScript函数generateThumbnails，它接受一个File对象作为参数，通过创建ImageBitmap，利用canvas进行尺寸调整并生成缩略图，最终返回base64编码的缩略图。如果base64字符串过长，会将其转换为Blob。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web端实现图片生成缩略图，纯js函数实现
在这里插入图片描述

主要函数generateThumbnails，传入一个File对象，生成的缩略图返回一个base64.
使用代码

generateThumbnails(file).then(imageThumbnail => {
           console.log(imageThumbnail )
 })

函数代码

export function generateThumbnails(imageFile) {
  return new Promise((resolve, reject) => {
    createImageBitmap(imageFile).then(imageBitmap => {
      const canvas = document.createElement('canvas')
      canvas.width = imageBitmap.height > 1000 ? (imageBitmap.height / 4) : (imageBitmap.height / 2)
      canvas.height = imageBitmap.width > 1000 ? (imageBitmap.width / 4) : (imageBitmap.width / 2)
      const ctx = canvas.getContext('2d')
      ctx.drawImage(imageBitmap, 0, 0, canvas.width, canvas.height)
      const url = canvas.toDataURL('image/jpeg')
      console.log('缩略图')
      console.log('%c  ', 'background:url(' + url + ') no-repeat ;line-height:' + canvas.height + 'px;font-size:' + canvas.height + 'px')
      if (url.length > 80 * 1024) {
        generateThumbnails(convertBase64UrlToBlob(url)).then(res => {
          resolve(res)
        })
      } else {
        resolve(url)
      }
    }).catch((err) => {
      reject('缩略图生成失败：' + err)
    })
  })
}

/**
 * 将以base64的图片url数据转换为Blob
 * @param base64 用url方式表示的base64图片数据
 */
function convertBase64UrlToBlob(base64) {
  const arr = base64.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const str = atob(arr[1])
  let n = str.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = str.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
}