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

要实现图片的无损压缩，可以使用canvas来进行操作，具体的步骤如下：

1. 创建一个canvas元素，并将图片绘制到canvas上。

2. 获取canvas上的像素数据，进行压缩处理。

3. 将处理后的像素数据重新绘制回canvas上。

4. 将canvas上的数据转换成对应的图片格式，如JPEG、PNG等。

5. 将压缩后的图片上传至服务器。

以下是一个简单的示例代码，可以用于参考：

// 压缩图片并上传
function compressAndUpload(file) {
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function (event) {
    var img = new Image();
    img.src = event.target.result;
    img.onload = function () {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      var newData = compress(imageData.data, canvas.width, canvas.height);
      var newImageData = new ImageData(newData, canvas.width, canvas.height);
      ctx.putImageData(newImageData, 0, 0);
      var newFile = dataURLtoFile(canvas.toDataURL(file.type), file.name);
      // 上传图片
      upload(newFile);
    };
  };
}

// 压缩像素数据
function compress(data, width, height) {
  var quality = 0.7; // 压缩质量
  var newData = new Uint8ClampedArray(width * height * 4);
  var ratio = Math.min(width / 800, height / 800); // 缩小比例
  var newWidth = Math.round(width / ratio);
  var newHeight = Math.round(height / ratio);
  var tmpCanvas = document.createElement('canvas');
  var tmpCtx = tmpCanvas.getContext('2d');
  tmpCanvas.width = newWidth;
  tmpCanvas.height = newHeight;
  var tmpImageData = tmpCtx.createImageData(newWidth, newHeight);
  for (var i = 0; i < newHeight; i++) {
    for (var j = 0; j < newWidth; j++) {
      var x = Math.round(j * ratio);
      var y = Math.round(i * ratio);
      var index1 = (i * newWidth + j) * 4;
      var index2 = (y * width + x) * 4;
      tmpImageData.data[index1] = data[index2];
      tmpImageData.data[index1 + 1] = data[index2 + 1];
      tmpImageData.data[index1 + 2] = data[index2 + 2];
      tmpImageData.data[index1 + 3] = data[index2 + 3];
    }
  }
  tmpCtx.putImageData(tmpImageData, 0, 0);
  var tmpDataUrl = tmpCanvas.toDataURL();
  var tmpImg = new Image();
  tmpImg.src = tmpDataUrl;
  tmpImg.onload = function () {
    var tmpCanvas2 = document.createElement('canvas');
    var tmpCtx2 = tmpCanvas2.getContext('2d');
    tmpCanvas2.width = tmpImg.width;
    tmpCanvas2.height = tmpImg.height;
    tmpCtx2.drawImage(tmpImg, 0, 0, tmpImg.width, tmpImg.height);
    var tmpImageData2 = tmpCtx2.getImageData(0, 0, tmpCanvas2.width, tmpCanvas2.height);
    newData = tmpImageData2.data;
  };
  return newData;
}

// 将dataURL转换成文件对象
function dataURLtoFile(dataUrl, fileName) {
  var arr = dataUrl.split(',');
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length;
  var u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], fileName, { type: mime });
}

// 上传图片
function upload(file) {
  // TODO: 实现图片上传功能
}

上述代码中，compressAndUpload函数用于压缩图片并上传，compress函数用于对像素数据进行压缩处理，dataURLtoFile函数用于将dataURL转换成文件对象，upload函数用于上传图片。需要根据具体的需求进行修改和完善。