images-quickly-compress
利用canvas画布压缩图片(ES6语法)
安装：
npm install images-quickly-compress --save
使用方式：
import ImagesQuicklyCompress from "images-quickly-compress";//导出：压缩图片插件
//压缩方式一：
let imageCompress = new ImagesQuicklyCompress({
mode:'pixel',//根据像素总大小压缩
num:1E6,//压缩后图片的总像素都是100万（相当于1000px * 1000px的图片）
size:'500kb',//图片大小超过500kb执行压缩
imageType:'image/jpeg',//jpeg压缩效果十分理想
quality:0.8,
orientation:false,
});
//压缩方式二：
let imageCompress = new ImagesQuicklyCompress({
mode:'width',//根据固定宽度压缩
num:500,//压缩后所有图片的宽度都是500px
size:'500kb',//图片大小超过500k压缩率比较低b执行压缩
imageType:'image/png', //压缩率比较低
quality:0.6,
orientation:false,
});
//注意：files是input的change事件获取的对象
imageCompress.compressor(files).then(res=>{
console.log('压缩结果：',res);//返回一个blod数组
let blobArr = res;
blobArr.forEach(blod => {
let formData = new FormData();//创建模拟form表单的FormData对象
formData.append('file',blod);//file是后端接收的变量
let config = {
headers:{'Content-Type':'multipart/form-data'}//添加请求头
};
axios.post('/api/upload',formData,config).then(response=>{
//上传图片
console.log(response.data);
});
});
});
参数说明：
| 参数 | 说明 | 是否必须 | 类型 | 默认值 |
|---|---|---|---|---|
| mode | pixel：是以固定的像素压缩。width：以固定的宽度进行压缩。 | 否 | String | 'pixel' |
| num | pixel模式对应num默认值是100万像素，输出的图片总像素数 1E6 = 宽 * 高 width模式对应num的默认值是500，输出的图片宽度都是500px。 |
否 | Number | 1E6 |
| size | 对超过该值的图片进行压缩,单位是KB。 | 否 | String/Number | '500kb'或500 |
| imageType | 压缩后输入图片的格式： image/jpeg 压缩率比较高，效果十分理想。 image/png 压缩率比较低。 |
否 | String | 'image/jpeg' |
| quality | 压缩质量。数值越低压缩后的体积越小，但图片越模糊，建议使用0.8。 | 否 | Number | 0.8 |
| orientation | android或ios拍照出来的图片可能会旋转90°/180°/270°,设置为true将图片处理 | 否 | Boolean | false |
Vue中使用方式：
上传图片
注：UploadImage.vue组件需要安装axios和接口路径需要修改。UploadImage组件是不带任何样式的，使用了absolute绝对定位，使用前需要给它的父标签添加relative相对定位。
React + Ant Design的使用方式：
Upload组件在上传前进行压缩
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Upload, message,Modal } from 'antd';
import { LoadingOutlined,PlusOutlined } from '@ant-design/icons';
import ImagesQuicklyCompress from "images-quickly-compress"; //导出：压缩图片插件
let imageCompress = new ImagesQuicklyCompress({
mode: 'pixel', //根据像素总大小压缩
num: 1E6, //压缩后图片的总像素都是100万（相当于1000px * 1000px的图片）
size: '500kb', //图片大小超过500kb执行压缩
imageType: 'image/jpeg', //jpeg压缩效果十分理想
quality: 0.8
});
class UploadImage extends Component {
static propTypes: {};
static defaultProps: { limit: number };
constructor(props: any) {
super(props);
this.state = {
loading: false,
fileList: [
/* {
uid: '-3',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
} */
],
};
}
componentDidMount() {
}
componentWillReceiveProps(props: any) {
}
async beforeUpload(file:any, fileList:any) {
//上传前
if(this.state.fileList.length + fileList.length > this.props.limit){
message.error(`最多上传${this.props.limit}张图片!`);
return Promise.reject();
}
let [blod] = await imageCompress.compressor([file]);
blod.uid = file.uid;
const isLt2M = blod.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('图片不能超过2MB!');
return Promise.reject();
}
return Promise.resolve(blod);
}
handleChange = (info:any) => {
//删除与上传 都执行
}
onPreview(file:any){
//查看图片
let src = file.url;
Modal.info({
icon:'',
title: '图片查看',
okText:'关闭',
content: (
)
});
};
render() {
const uploadButton = (
{this.state.loading ?
{fileList.length < this.props.limit ? uploadButton : ''}
);
}
}
export default UploadImage;
UploadImage.propTypes = {
name:PropTypes.string.isRequired,
form:PropTypes.object.isRequired,
limit:PropTypes.number,//默认值最多上传99张图片
action:PropTypes.string,
}
UploadImage.defaultProps = {
limit: 99
}
下面是将压缩后的图片回显到页面，作为知识的扩展，不感兴趣忽略。注：网上有的插件使用base64 URL方式将图片回显到页面，对于体积大的图片，回显过程会明显卡死，但用bold URL能实现秒加载不卡顿。
//js代码:
import ImagesQuicklyCompress from "images-quickly-compress.js";
let imageCompress = new ImagesQuicklyCompress({
mode:'pixel',
num:1E6,
size:'500kb',
imageType:'image/jpeg',
quality:0.8
});
document.querySelector('#imgFilesInput').addEventListener("change", function() {
imageCompress.compressor(this.files).then(res=>{
console.log('压缩结果：',res);
let blobArr = res;
blobArr.forEach(blod => {
//bold格式的图片显示到页面
let img = document.createElement('img');
img.src = window.URL.createObjectURL(blod);
img.onload = function(){
document.body.appendChild(img);
window.URL.revokeObjectURL(this.src);
}
});
});
}, false);
bug反馈：
https://github.com/leforyou/images-quickly-compress/issues
技术参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
https://www.npmjs.com/package/exif-js