js压缩图片并上传，不失真，保证图片清晰度

在JavaScript中，可以使用HTML5的Canvas API来压缩图片。以下是一个基本的例子：

//选择文件并获取图片对象
const input = document.querySelector('input[type="file"]');
const img = new Image();
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

input.addEventListener('change', () => {
  const file = input.files[0];
  const reader = new FileReader();
  reader.onload = () => {
    img.onload = () => {
      //设置canvas的宽高
      canvas.width = img.width;
      canvas.height = img.height;
      //将图片绘制在canvas上
      ctx.drawImage(img, 0, 0);
      //将canvas转换为DataURL
      const dataURL = canvas.toDataURL('image/jpeg', 0.7); //0.7为压缩质量，范围从0到1
      //将DataURL转换为Blob对象
      const blob = dataURLtoBlob(dataURL);
      //上传Blob对象
      uploadBlob(blob);
    };
    img.src = reader.result;
  };
  reader.readAsDataURL(file);
});

//将DataURL转换为Blob对象
function dataURLtoBlob(dataURL) {
  const arr = dataURL.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

//上传Blob对象
function uploadBlob(blob) {
  const formData = new FormData();
  formData.append('file', blob, 'filename.jpg');
  //使用XMLHttpRequest或fetch发送formData
}

这个例子中，我们使用了Canvas API将图片绘制在Canvas上，并将Canvas转换为DataURL。然后，我们将DataURL转换为Blob对象，并上传Blob对象。

为了保证图片清晰度，在转换为DataURL时，我们可以设置压缩质量。较高的压缩质量会导致文件大小较大，较低的压缩质量会导致图片失真。根据实际需求，可以选择合适的压缩质量。