jquery-image-compressor 详细使用

jQuery Image Compressor是一个用于压缩图片的jQuery插件。它可以将图片压缩到指定的大小，并且可以在不影响图片质量的情况下进行压缩。

使用jQuery Image Compressor非常简单，只需要按照以下步骤即可：

引入jQuery和jQuery Image Compressor插件

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery-image-compressor.min.js"></script>

创建一个input元素用于选择图片

<input type="file" id="image" accept="image/*">

创建一个img元素用于显示压缩后的图片

<img id="compressed-image">

使用jQuery Image Compressor压缩图片

$('#image').change(function() {
  $.compressImage(this.files[0], {
    quality: 0.8, // 设置压缩质量
    maxWidth: 800, // 设置最大宽度
    maxHeight: 800, // 设置最大高度
    success: function(result) {
      $('#compressed-image').attr('src', result);
    },
    error: function(error) {
      console.log(error);
    }
  });
});

在上面的代码中，我们首先监听input元素的change事件，当用户选择图片后，调用$.compressImage方法进行图片压缩。该方法接受一个File对象作为参数，以及一些可选的配置项。成功压缩后，会调用success回调函数，并将压缩后的图片数据传递给它。如果出现错误，则会调用error回调函数。

通过以上步骤，我们就可以使用jQuery Image Compressor插件来压缩图片了。