js将图片压缩到10k以下并且保证图片不马赛克

将图片压缩到10k以下并且保证图片不失真是一个比较困难的问题，因为压缩是需要牺牲一定的清晰度或者细节的。但是，我们可以尝试使用以下方法来达到尽可能小的文件大小和较好的图片质量：

1.使用WebP格式

WebP是由谷歌开发的一种新型图片格式，它可以提供更好的压缩比和更高的图像质量。通过使用WebP格式，可以将图像大小减小到原来的一半，而不会影响图像质量。但是，WebP格式并不是所有浏览器都支持，所以需要检查是否有必要使用这种格式。

2.使用canvas压缩图片

可以使用Canvas API将图片压缩到指定的大小。在压缩过程中，可以尝试使用一些算法来保持图片的清晰度。以下是一个使用canvas压缩图片的例子：

function compressImage(file, maxSize, callback) {
  const reader = new FileReader();
  reader.onload = (event) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      let width = img.width;
      let height = img.height;
      const ratio = width / height;
      if (width > height && width > maxSize) {
        width = maxSize;
        height = Math.floor(width / ratio);
      } else if (height > width && height > maxSize) {
        height = maxSize;
        width = Math.floor(height * ratio);
      }
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
      canvas.toBlob((blob) => {
        callback(blob);
      }, 'image/jpeg', 0.7);
    };
    img.src = event.target.result;
  };
  reader.readAsDataURL(file);
}

在这个例子中，我们使用Canvas API将图片压缩到指定的大小。我们首先读取文件并将其转换为DataURL，然后创建一个Image对象并将DataURL赋值给它。接着，我们使用Canvas API绘制压缩后的图像并将其转换为Blob对象。最后，我们调用回调函数并将Blob对象作为参数传递给它。

在这个例子中，我们使用了0.7作为压缩质量。这个值可以根据需要进行调整。同时，我们使用了maxSize参数来指定最大的图像大小。如果图像的宽度或高度大于这个值，我们就将其缩小到这个值以内。这个值也可以根据需要进行调整。

3.使用第三方库

除了使用Canvas API，还可以使用一些第三方库来压缩图片，如：`compressorjs`、`image-compressor`等。

需要注意的是，无论使用哪种方法来压缩图片，都需要进行测试来确定最适合的压缩质量和大小。同时，压缩图片的效果也取决于原始图片的大小和质量。