Compressor.js 图片压缩及方向修正

问题背景

现在用手机拍照上传图片的应用场景越来越多，但是手机拍照的图片现在都过大，十几兆的都不在少数，最关键的一点手机拍照的方向不同，图片最后显示出来的方向也是千奇百怪。

解决方案

自己造轮子那是不可能的，成熟的轮子那么多，今天我们就来用Compressor.js这个插件来实现我们的需求

代码演示

// 这里用layer插件做弹窗
const upload = $('#upload');
let files = [];
upload.on('change', function (e) {
    // 这里需要做一个取消判断 避免报错
    if (e.currentTarget.files.length <= 0) {
        return false;
    }
    // 展开菊花
    const load = layer.load(2);
    // 提取文件
    const file = e.currentTarget.files[0];
    // 开始压缩
    new Compressor(file, {
        quality: 0.6, // 压缩质量 可以查看文档获取明细
        success(result) { 
            // 成功后上传
            const fd = new FormData();
            fd.append('file', result);
            $.ajax({
                url: '/api/Upload/PostImages',
                type: 'post',
                processData: false,
                contentType: false,
                data: fd,
                success: function (res) {
     // 本地连接
                    const id = window.URL.createObjectURL(result);
                    files.push({
                        id: id,
                        file: result, // 保存文件索引
                        url: res.Url // 服务器返回的云端连接
                    });
                    layer.close(load);
                },
                error: function (err) { // 失败
                    layer.close(load);
                    layer.alert(`code：${err.status}，${err.responseText}`, { title: '发生错误，请稍后重试！' });
                }
            });
        },
        error(err) {
            layer.close(load); // 失败
            layer.alert(`图片文件压缩失败`, { title: '发生错误，请稍后重试！' });
        }
    });
});

更多应用，请访问官网

Compressor.js