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

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

<script>

/**
 * 从图片 URL 获取 Blob 对象
 * @param {string} imageUrl 图片的 URL 地址
 * @returns {Promise<Blob>} Blob 对象的 Promise
 */
 async function fetchImageAsBlob(imageUrl) {
  try {
    const response = await fetch(imageUrl);
    if (!response.ok) {
      throw new Error(`Failed to fetch image: ${response.statusText}`);
    }
    const blob = await response.blob();
    return blob;
  } catch (error) {
    console.error('Error fetching image:', error);
    throw error;
  }
}

/**
 * 生成缩略图
 * @param {File | Blob | string} imageSource 图片文件、Blob 或者 URL 地址
 * @returns {Promise<string>} 缩略图的 Base64 URL
 */
function generateThumbnails(imageSource) {
  return new Promise((resolve, reject) => {
    let imageBlob;

    if (typeof imageSource === 'string') {
      // 如果是 URL，则先获取 Blob
      fetchImageAsBlob(imageSource)
        .then(blob => {
          imageBlob = blob;
          return createImageBitmap(blob);
        })
        .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);
        });
    } else {
      // 如果已经是 Blob 或 File，则直接生成缩略图
      createImageBitmap(imageSource)
        .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 {string} base64 用 URL 方式表示的 base64 图片数据
 * @returns {Blob} Blob 对象
 */
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 });
}

/* 示例使用方法
const imageUrl = 'https://xxxxx.cc/ffff.jpg';

generateThumbnails(imageUrl)
  .then(thumbnailUrl => {
    console.log('生成的缩略图 URL:', thumbnailUrl);
    const imgElement = document.createElement('img');
    imgElement.src = thumbnailUrl;
    document.body.appendChild(imgElement);
  })
  .catch(error => {
    console.error('生成缩略图时出错:', error);
  });*/

  </script>

教程参考于：

https://blog.csdn.net/sky529063865/article/details/130261981