不借助第三方库js如何压缩图片到指定大小

在JavaScript中压缩图片到指定大小而不借助第三方库可以通过HTML5的File API以及Canvas来实现。以下是一个基本的步骤介绍：

1. 使用HTML5的`<input type="file">`元素让用户选择图片。
2. 通过File API读取用户选择的图片文件。
3. 创建一个Canvas元素，并设置适当的宽度和高度。
4. 利用Canvas的`drawImage`方法将图片绘制到Canvas上，此时可以控制图片的大小，从而实现压缩。
5. 使用`toDataURL`方法将Canvas内容转换为图片格式的数据URL，此时可以设置压缩的质量参数来进一步调整图片大小。

这里是一个简单的示例代码：

document.getElementById('fileInput').addEventListener('change', function(e) {
  var file = e.target.files[0];
  var img = new Image();
  img.onload = function() {
    var canvas = document.createElement('canvas');
    var max_width = 800; // 假设我们希望图片不超过800像素宽
    var max_height = 600; // 假设我们希望图片不超过600像素高

    var width = img.width;
    var height = img.height;

    if (width > height) {
      if (width > max_width) {
        height *= max_width / width;
        width = max_width;
      }
    } else {
      if (height > max_height) {
        width *= max_height / height;
        height = max_height;
      }
    }

    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, width, height);

    // 使用toDataURL方法，其中第二个参数可以控制图片的质量，范围为0到1之间
    var dataUrl = canvas.toDataURL('image/jpeg', 0.7); // 0.7为质量参数，可以根据需要调整
    document.getElementById('output').src = dataUrl;
  };
  var reader = new FileReader();
  reader.onloadend = function(e) {
    img.src = e.target.result;
  }
  reader.readAsDataURL(file);
});

在上述代码中，我们首先通过`FileReader`读取了用户选择的文件，并将其作为图片源。然后创建了一个Canvas，并根据原图片的尺寸以及最大宽度和高度限制计算出新的尺寸，保证图片不会超过指定的大小。最后通过`toDataURL`方法生成了一个新的图片数据链接，其中的图片质量参数可以根据需要调整以控制压缩程度。