前端压缩：
基本上前端进行图片压缩都是基于canvas进行压缩，可以按照自定义尺寸缩小，达到压缩体积的效果。
操作流程：前端拿到选中图片数据，利用canvas绘制进行自定义压缩，将压缩后的图片数据作为上传数据。
优点：不改变图片尺寸情况下，压缩出来的图片体积减小，清晰度肉眼看不出变化。
缺点：自定义图片尺寸情况下，压缩出来的图片体积减小，但是清晰度明显变差。
示例插件： compressorjs
npm i compressor -S
示例代码：
new Compressor(file, options)
// options 部分属性介绍
{
quality: 0.6, // 取值范围0~1，推荐0.6~0.8，数值与图片体积压缩效果成反比
min-width: 200, // 大于0，输出图片最小宽度
min-height: 200, // 大于0，输出图片最小高度
max-width: 200, // 大于0，输出图片最大宽度
max-height: 200, // 大于0，输出图片最大高度
width: 980, // 只设置width时会保留原有比例
height: 988, // 设置压缩后的图片高度
resize: 'contain', // 'none' || 'contain' || 'cover',
success: (result) => {}, // 成功回调，result为压缩后文件对象，可进行自定义上传
// 图片绘制到canvas压缩前执行的钩子函数，如为图片增加滤镜
beforeDraw(context, canvas) {
context.filter = 'grayscale(100%)';
},
// 图片绘制到canvas压缩后执行的钩子函数，如为图片增加水印效果
drew(context, canvas) {
context.fillStyle = '#fff';
context.font = '2rem serif';
// 如：在图片左下角增加自定义文本
context.fillText('watermark', 20, canvas.height - 20);
},
}
//示例效果：将选中图片按照原比例，宽度设置为980px进行压缩，增加灰色滤镜、以及文字水印
const file; // 选中图片数据
if (file) {
new Compressor(file, {
quality: 0.6,
width: 980
resize: 'contain',
success(result) {
// result: 文件对象，自定义上传处理
},
// 为图片增加滤镜
beforeDraw(context, canvas) {
context.filter = 'grayscale(100%)';
},
// 为图片增加水印效果
drew(context, canvas) {
context.fillStyle = '#fff';
context.font = '2rem serif';
// 如：在图片左下角增加自定义文本
context.fillText('watermark', 20, canvas.height - 20);
},
error(err) {
console.log(err.message);
},
});
}
[示例原图](# 图片一) 执行了beforeDrew钩子图片 执行了drew钩子图片
node端压缩：
处理类型：
1、对现有图片进行压缩上传替换
2、对前端上传的图片进行压缩再进行上传
示例插件：tinify
优点：压缩出来的图片体积减小，不改变尺寸情况下无损压缩。
缺点：每月免费额度为500次，且resize等操作会累计次数，超过的次数需要付费。
npm i tinify -S
示例代码
const tinify = require('tinify')
tinify.key = 'APIKey'
//1、使用 tinify.fromUrl 对在线图片进行压缩
// 拿到压缩后的图片对象
const result = await tinify.fromUrl(url)
// 处理图片名称后做自定义上传处理、拿到返回地址做数据替换即可
let arr = url.split('.')
let imgType = arr[arr.length - 1]
const FormData = require('form-data')
const formData = new FormData()
formData.append('is_watermark', false)
formData.append('file', result)
formData.append('submit_user', '林福才-子丘')
let filename = `${moment().unix()}.${imgType}`
// 自定义处理上传、替换...
//2、对前端传递过来的图片文件进行压缩
var from = new formidable.IncomingForm();
// 设置编辑
form.encoding = 'utf-8';
// 设置文件存储路径
form.uploadDir = path.join(__dirname, '../upload/')
// 保留后缀
form.keepExtensions = true
// 设置单文件大小限制
form.maxFieldsSize = 10 * 1024 * 1024;
// 解析请求数据 files为文件数据，fileds为其他字段数据，自定义返回数据结构
let fileRes = await new Promise(async (resolve, reject) => {
form.parse(req, (err, fields, files) => {
resolve({fileBuffer:files, ...fields})
})
})
// 拿到解析到的文件数据，使用tinify.fromBuffer进行压缩转换
const newFile = await tinify.fromBuffer(fileRes.fileBuffer)
// 需要自定义大小，可通过resize进行调整
const resizeFile = newFile.resize({
method: 'fit', // 'scale' || 'fit' || 'cover' || 'thumb'
width: 200,
hieght: 100
})
// 自定义处理文件上传，将地址返回给前端即可
前端multipart上传时，可通过form.onPart单独处理接收的文件数据，进行数据拼接
// 手动拼接数据，在form.parse的回调resolve({fileBuffer, ...fileds})
let fileArr = []
let fileLength = []
let fileBuffer;
let fileName = ''
form.onPart = (part) => {
// 让formidable处理非文件数据
if(!part.filename) {
form.handlePart(part);
}
part.addListener('data', (d) => {
if(part.name !== file || d.length == 0) return
fileArr.push(d)
fileLength += d.length
})
part.addListener('end', () => {
if(part.name == 'file') {
fileName = part.filename
fileBuffer = Buffer.concat(fileArr, fileLength)
}
})
}
图片效果
图片一
https://i.niupic.com/images/2022/03/16/9WAE.png
图片二
https://i.niupic.com/images/2022/03/16/9WAF.png
