通过JS暴力实现生成缩略图通过base64输出
21天前
今天也是在网站找了一些用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
0 赞
or 打赏
喜欢就打赏一点
刘郎
21天前 . LV.0
如果使用fetch API从该URL获取图片 并将其转换为Blob对象 如果获取过程中出现错误 它会抛出一个错误 哈哈 还有 如果缩略图尺寸计算未考虑宽高比 可能导致图片变形?
寻梦xunm
21天前 . LV.0
@刘郎
这也就是一个演示代码，实际用的话可以根据自己的需要修改。