[JS] Web側で画像のサムネイルを生成、pure js関数で実現

画像生成サムネイルを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 })
}