通过JS暴力实现生成缩略图通过 64输出

今天也是在网站找了一些用js生成缩略图的文章教程，都是一些千奇百怪的文章，虽然每个文章教程和代码都不一样，结果基本都是那么几种，不是缩放就是裁剪或者重新绘制一个图片。
博主也是实验了其中的一种方法，可惜该教程提供的代码不支持直接传图片url地址。虽然博主不懂js代码，不懂怎么办呢？当然是找AI智能帮忙重新修改一遍呗，是不是很简单。

<script><br />
<br />
/**<br />
 * 从图片 URL 获取 Blob 对象<br />
 * @param {string} imageUrl 图片的 URL 地址<br />
 * @returns {Promise<Blob>} Blob 对象的 Promise<br />
 */<br />
 async function fetchImageAsBlob(imageUrl) {<br />
  try {<br />
    const response = await fetch(imageUrl);<br />
    if (!response.ok) {<br />
      throw new Error(`Failed to fetch image: ${response.statusText}`);<br />
    }<br />
    const blob = await response.blob();<br />
    return blob;<br />
  } catch (error) {<br />
    console.error('Error fetching image:', error);<br />
    throw error;<br />
  }<br />
}<br />
<br />
/**<br />
 * 生成缩略图<br />
 * @param {File | Blob | string} imageSource 图片文件、Blob 或者 URL 地址<br />
 * @returns {Promise<string>} 缩略图的 Base64 URL<br />
 */<br />
function generateThumbnails(imageSource) {<br />
  return new Promise((resolve, reject) => {<br />
    let imageBlob;<br />
<br />
    if (typeof imageSource === 'string') {<br />
      // 如果是 URL，则先获取 Blob<br />
      fetchImageAsBlob(imageSource)<br />
        .then(blob => {<br />
          imageBlob = blob;<br />
          return createImageBitmap(blob);<br />
        })<br />
        .then(imageBitmap => {<br />
          // 继续生成缩略图<br />
          const canvas = document.createElement('canvas');<br />
          canvas.width = imageBitmap.height > 1000 ? (imageBitmap.height / 4) : (imageBitmap.height / 2);<br />
          canvas.height = imageBitmap.width > 1000 ? (imageBitmap.width / 4) : (imageBitmap.width / 2);<br />
          const ctx = canvas.getContext('2d');<br />
          ctx.drawImage(imageBitmap, 0, 0, canvas.width, canvas.height);<br />
          const url = canvas.toDataURL('image/jpeg');<br />
          console.log('缩略图');<br />
          console.log('%c  ', 'background:url(' + url + ') no-repeat ;line-height:' + canvas.height + 'px;font-size:' + canvas.height + 'px');<br />
          if (url.length > 80 * 1024) {<br />
            generateThumbnails(convertBase64UrlToBlob(url)).then(res => {<br />
              resolve(res);<br />
            });<br />
          } else {<br />
            resolve(url);<br />
          }<br />
        })<br />
        .catch(err => {<br />
          reject('缩略图生成失败：' + err);<br />
        });<br />
    } else {<br />
      // 如果已经是 Blob 或 File，则直接生成缩略图<br />
      createImageBitmap(imageSource)<br />
        .then(imageBitmap => {<br />
          const canvas = document.createElement('canvas');<br />
          canvas.width = imageBitmap.height > 1000 ? (imageBitmap.height / 4) : (imageBitmap.height / 2);<br />
          canvas.height = imageBitmap.width > 1000 ? (imageBitmap.width / 4) : (imageBitmap.width / 2);<br />
          const ctx = canvas.getContext('2d');<br />
          ctx.drawImage(imageBitmap, 0, 0, canvas.width, canvas.height);<br />
          const url = canvas.toDataURL('image/jpeg');<br />
          console.log('缩略图');<br />
          console.log('%c  ', 'background:url(' + url + ') no-repeat ;line-height:' + canvas.height + 'px;font-size:' + canvas.height + 'px');<br />
          if (url.length > 80 * 1024) {<br />
            generateThumbnails(convertBase64UrlToBlob(url)).then(res => {<br />
              resolve(res);<br />
            });<br />
          } else {<br />
            resolve(url);<br />
          }<br />
        })<br />
        .catch(err => {<br />
          reject('缩略图生成失败：' + err);<br />
        });<br />
    }<br />
  });<br />
}<br />
<br />
/**<br />
 * 将以 base64 的图片 URL 数据转换为 Blob<br />
 * @param {string} base64 用 URL 方式表示的 base64 图片数据<br />
 * @returns {Blob} Blob 对象<br />
 */<br />
function convertBase64UrlToBlob(base64) {<br />
  const arr = base64.split(',');<br />
  const mime = arr[0].match(/:(.*?);/)[1];<br />
  const str = atob(arr[1]);<br />
  let n = str.length;<br />
  const u8arr = new Uint8Array(n);<br />
  while (n--) {<br />
    u8arr[n] = str.charCodeAt(n);<br />
  }<br />
  return new Blob([u8arr], { type: mime });<br />
}<br />
<br />
/* 示例使用方法<br />
const imageUrl = 'https://xxxxx.cc/ffff.jpg';<br />
<br />
generateThumbnails(imageUrl)<br />
  .then(thumbnailUrl => {<br />
    console.log('生成的缩略图 URL:', thumbnailUrl);<br />
    const imgElement = document.createElement('img');<br />
    imgElement.src = thumbnailUrl;<br />
    document.body.appendChild(imgElement);<br />
  })<br />
  .catch(error => {<br />
    console.error('生成缩略图时出错:', error);<br />
  });*/<br />
<br />
  </script><br />
```<br />
<br />
 > 教程参考于：<br />
<br />
https://blog.csdn.net/sky529063865/article/details/130261981