将图片文件流压缩至100k以内再转为ImageData
要将图片文件流压缩至100k以内,并将其转换为ImageData,可以使用以下步骤:
- 将图片文件流转换为图片对象。
- 使用canvas将图片绘制到画布上。
- 通过调整画布的尺寸和图片的质量来压缩图片。
- 将压缩后的图片转换为ImageData。
下面是一个示例代码,使用了JavaScript和HTML5的Canvas API来实现:
// 传入图片文件流和目标压缩大小(以字节为单位)
function compressImage(fileStream, targetSize) {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = URL.createObjectURL(fileStream);
img.onload = function() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 将图片绘制到画布上
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
let quality = 0.9; // 初始压缩质量
let imageData = canvas.toDataURL('image/jpeg', quality); // 转换为JPEG格式的Data URL
// 循环压缩直到满足目标大小
while (imageData.length > targetSize && quality > 0.1) {
quality -= 0.1;
imageData = canvas.toDataURL('image/jpeg', quality);
}
// 创建新的Image对象并加载压缩后的图片
const compressedImg = new Image();
compressedImg.src = imageData;
compressedImg.onload = function() {
// 创建一个新的空画布
const newCanvas = document.createElement('canvas');
newCanvas.width = compressedImg.width;
newCanvas.height = compressedImg.height;
// 在新画布上绘制压缩后的图片
const newCtx = newCanvas.getContext('2d');
newCtx.drawImage(compressedImg, 0, 0);
// 获取压缩后的图片的ImageData
const compressedImageData = newCtx.getImageData(0, 0, newCanvas.width, newCanvas.height);
// 将压缩后的ImageData传递给resolve函数
resolve(compressedImageData);
};
compressedImg.onerror = function() {
reject(new Error('无法加载压缩后的图片'));
};
};
img.onerror = function() {
reject(new Error('无法加载图片'));
};
});
}
// 示例使用方式:
const fileStream = // 从文件选择器或其他方式获取文件流
const targetSize = 100 * 1024; // 目标压缩大小为100k
compressImage(fileStream, targetSize)
.then((compressedImageData) => {
// 处理压缩后的ImageData
console.log(compressedImageData);
})
.catch((error) => {
// 处理错误
console.error(error);
});
请注意,压缩后的图片质量可能会有所降低,具体效果取决于压缩算法和目标大小的限制
原文地址: https://www.cveoy.top/t/topic/izpV 著作权归作者所有。请勿转载和采集!