使用js原生实现自动压缩图片到500kb以下

可以使用HTML5中的Canvas API和File API来实现图片压缩。

首先，我们需要获取用户选择的图片文件。可以使用`<input type="file">`来实现文件选择，然后监听其`change`事件获取用户选择的文件。

<input type="file" id="upload">

const fileInput = document.getElementById('upload');
fileInput.addEventListener('change', handleFileSelect, false);

function handleFileSelect(event) {
  const file = event.target.files[0];
  // 处理图片文件
}

接下来，我们可以使用FileReader API将图片文件读取为一个base64编码的字符串，并将其绘制到Canvas中。

function handleFileSelect(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(event) {
    const image = new Image();
    image.onload = function() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = image.width;
      canvas.height = image.height;
      ctx.drawImage(image, 0, 0);
      // 处理压缩后的图片
    }
    image.src = event.target.result;
  }
  reader.readAsDataURL(file);
}

接下来，我们需要对Canvas中的图片进行压缩。可以使用Canvas的`toBlob()`方法将Canvas中的内容转换为Blob对象，然后使用FileReader API将Blob对象转换为ArrayBuffer。

function handleFileSelect(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(event) {
    const image = new Image();
    image.onload = function() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = image.width;
      canvas.height = image.height;
      ctx.drawImage(image, 0, 0);
      canvas.toBlob(function(blob) {
        const reader = new FileReader();
        reader.onload = function(event) {
          const buffer = event.target.result;
          // 处理压缩后的图片
        }
        reader.readAsArrayBuffer(blob);
      }, 'image/jpeg', 0.7);
    }
    image.src = event.target.result;
  }
  reader.readAsDataURL(file);
}

最后，我们可以使用JSZip库将压缩后的图片保存为zip文件，或者使用XMLHttpRequest将其上传到服务器。

完整代码如下：

<input type="file" id="upload">

<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
<script>
  const fileInput = document.getElementById('upload');
  fileInput.addEventListener('change', handleFileSelect, false);

  function handleFileSelect(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(event) {
      const image = new Image();
      image.onload = function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.drawImage(image, 0, 0);
        canvas.toBlob(function(blob) {
          const reader = new FileReader();
          reader.onload = function(event) {
            const buffer = event.target.result;
            // 压缩后的图片数据
            console.log(buffer);
            // 保存为zip文件
            const zip = new JSZip();
            zip.file('compressed.jpg', buffer);
            zip.generateAsync({type:'blob'})
              .then(function(content) {
                const link = document.createElement('a');
                link.download = 'compressed.zip';
                link.href = URL.createObjectURL(content);
                link.click();
              });
            // 或者上传到服务器
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload', true);
            xhr.send(buffer);
          }
          reader.readAsArrayBuffer(blob);
        }, 'image/jpeg', 0.7);
      }
      image.src = event.target.result;
    }
    reader.readAsDataURL(file);
  }
</script>