/**
* 利用Canvas压缩图片文件
* @param {File} file 图片文件
* @param {Object} opt 选项
* @property {number} opt.width 图片宽度
* @property {number} opt.height 图片宽度
* @property {number} opt.quality 图片图片质量[0,1]
*/
export default function imgCompress(file, { width, height, quality }) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onerror = () => {
reject(new Error('FileReader read file Error!'));
};
reader.onload = () => {
const img = new Image();
img.src = reader.result;
img.onerror = () => {
reject(new Error('Image read Error!'));
};
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const scale = Math.max(img.width / width, img.height / height, 1);
canvas.width = img.width / scale;
canvas.height = img.height / scale;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
resolve(canvas.toDataURL('image/jpeg', quality));
};
};
});
}
利用Canvas压缩图片文件
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 1、获取图片宽度、高度，并重置图片的宽度和高度；这里只用图片的宽度来做判断。下面代码只是一些代码片段。 2、使用c...
- 一款用于在Android设备上获取照片（拍照或从相册、文件中选择）、裁剪图片、压缩图片的开源工具库https://...
- 网上提供的大都是UIImage的回调，返回image，但是我们使用的时候是作文data文件上传的，so，很多人在测...
