// 图片压缩(主函数,下面两个为调用)
export function imgZipPromise(file) {
return new Promise(async (resolve, reject) => {
const img = await readImg(file);
const blob = await compressImg(img, file.type, 1000, 1000);
const formData = new FormData();
formData.append("file", blob, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象
resolve(formData);
});
}
// 压缩前将file转换成img对象
function readImg(file) {
return new Promise((resolve, reject) => {
const img = new Image();
const reader = new FileReader();
reader.onload = function (e) {
img.src = e.target.result;
};
reader.onerror = function (e) {
reject(e);
};
reader.readAsDataURL(file);
img.onload = function () {
resolve(img);
};
img.onerror = function (e) {
reject(e);
};
});
}
/**
* 压缩图片
*@param img 被压缩的img对象
* @param type 压缩后转换的文件类型
* @param mx 触发压缩的图片最大宽度限制
* @param mh 触发压缩的图片最大高度限制
*/
function compressImg(img, type, mx, mh) {
return new Promise((resolve, reject) => {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const { width: originWidth, height: originHeight } = img;
// 最大尺寸限制
const maxWidth = mx;
const maxHeight = mh;
// 目标尺寸
let targetWidth = originWidth;
let targetHeight = originHeight;
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > 1) {
// 宽图片
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
// 高图片
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
canvas.width = targetWidth;
canvas.height = targetHeight;
context.clearRect(0, 0, targetWidth, targetHeight);
// 图片绘制
context.drawImage(img, 0, 0, targetWidth, targetHeight);
canvas.toBlob(function (blob) {
resolve(blob);
}, type || "image/png");
});
}
图片压缩
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 很多做图片设计的伙伴每天都在处理着相当多的图片,天天和图片打交道,难免会遇到图片刚制作好文件太大的问题,虽然PS等...
- 引言:太多的图片会增加服务器的压力,而目前用户的手机像素越来越高,图片的体积也越来越大,动则5-10多M,而当项目...
- image-compressor 一个简单的JavaScript图像压缩器。使用浏览器的原生canvas.toBl...
- 免费图片处理工具[https://getimg.co/] 图片压缩,图片大小调整,图片裁剪,图片格式转换. 图片压...