如何使用jquery文件上传器压缩图片

使用jQuery文件上传器压缩图片可以通过以下步骤实现：

引入jQuery和jQuery文件上传器插件：在HTML文件中引入jQuery和jQuery文件上传器插件的CDN链接或本地文件。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-file-upload/3.1.0/jquery.fileupload.min.js"></script>

创建HTML元素：在页面中创建一个用于上传图片的HTML元素，例如一个文件选择按钮和一个用于显示压缩后图片的元素。

<input type="file" id="fileInput">
<img id="compressedImage" src="" alt="Compressed Image">

编写JavaScript代码：使用jQuery文件上传器插件的API来实现图片压缩功能。

$(document).ready(function() {
  $('#fileInput').fileupload({
    url: 'upload.php', // 上传图片的服务器端处理脚本
    dataType: 'json',
    done: function(e, data) {
      // 上传完成后的回调函数
      if (data.result.success) {
        // 获取压缩后的图片URL并显示
        $('#compressedImage').attr('src', data.result.compressedImageUrl);
      } else {
        alert('图片上传失败');
      }
    },
    add: function(e, data) {
      // 选择图片后的回调函数
      var file = data.files[0];
      // 使用canvas进行图片压缩
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      var img = new Image();
      var reader = new FileReader();
      reader.onload = function(e) {
        img.onload = function() {
          var maxWidth = 800; // 压缩后的最大宽度
          var maxHeight = 600; // 压缩后的最大高度
          var width = img.width;
          var height = img.height;
          if (width > height) {
            if (width > maxWidth) {
              height *= maxWidth / width;
              width = maxWidth;
            }
          } else {
            if (height > maxHeight) {
              width *= maxHeight / height;
              height = maxHeight;
            }
          }
          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(img, 0, 0, width, height);
          var compressedImageDataUrl = canvas.toDataURL('image/jpeg', 0.8); // 压缩后的图片数据URL
          data.files[0] = dataURItoBlob(compressedImageDataUrl); // 替换原始文件为压缩后的文件
          data.submit(); // 提交上传
        };
        img.src = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  });

  // 将数据URL转换为Blob对象
  function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: mimeString });
  }
});

以上代码实现了以下功能：