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

寻梦xunm| 314| 收集

6个月前

超过185天温馨提示

本文最后更新于2024年09月28日，已超过185天没有更新，若内容或图片失效，请留言反馈。

今天也是在网站找了一些用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://pic2.ziyuan.wang/user/xunm/2024/09/IMG_20240210_152431_compress_16_2c94c9ccc2164.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

教程 js 代码

本站相关资源来自互联网用户收集发布，仅供用于学习和交流。如有侵权之处，请联系站长并出示相关证明以便删除，敬请谅解！

0 赞 or 打赏

喜欢就打赏一点

还是今天春节初一爬山拍摄的图片

笑傲再梦春秋西游单机版11副本内置多开助战复古一键启动GM工具

服务器服务器

妈的，累死累活才这点工资

47人气9小时前

又要开始上夜班了，坚持还有十来天

67人气1天前

typecho简洁主题-采风

106人气2天前

最近忙，没得空更新

109人气6天前

又是被叼的一天

238人气14天前

Photoshop2025年全面核心技术训练教程

182人气15天前

刘郎

6个月前 . LV.0

如果使用fetch API从该URL获取图片并将其转换为Blob对象如果获取过程中出现错误它会抛出一个错误哈哈还有如果缩略图尺寸计算未考虑宽高比可能导致图片变形?

Linux Chrome 贵州省贵阳市
1. 寻梦xunm 作者博主
  
  6个月前 . 贵人 . LV.6
  
  @刘郎
  这也就是一个演示代码，实际用的话可以根据自己的需要修改。
  
  Android 夸克浏览器重庆市

服务器服务器

我的音乐