使用js将图片压缩到指定大小

### 回答1：
可以使用 JavaScript 库或框架来实现图片压缩功能。

例如可以使用 "canvas" 元素和 "FileReader" 对象来实现图片压缩。

以下是一个简单的示例代码：

// 选择文件 input 元素的 id
const inputId = 'input';

// 压缩后图片的大小（单位为字节）
const targetSize = 100000;

// 选择文件
const input = document.getElementById(inputId);
const file = input.files[0];

// 创建 FileReader 对象
const reader = new FileReader();

// 当文件加载完成时运行的函数
reader.onload = function(event) {
  // 获取加载的图片
  const img = new Image();
  img.src = event.target.result;

  // 当图片加载完成时运行的函数
  img.onload = function() {
    // 获取图片的原始大小
    const originalSize = file.size;

    // 计算图片压缩比例
    const ratio = targetSize / originalSize;

    // 创建 canvas 元素
    const canvas = document.createElement('canvas');

    // 设置 canvas 的宽度和高度
    canvas.width = img.width;
    canvas.height = img.height;

    // 将图片绘制到 canvas 上
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    // 压缩图片
    const compressedDataUrl = canvas.toDataURL('image/jpeg', ratio);

    // 使用压缩后的图片数据
    // ...
  };
};

// 以 DataURL 的形式读取文件
reader.readAsDataURL(file);

这段代码会读取选择的文件，将其加载到内存中，然后将其绘制到 canvas 上，并使用指定的压缩比例进行压缩。

### 回答2：
使用js将图片压缩到指定大小可以通过以下步骤实现：

1. 首先，通过HTML的<input>元素让用户选择需要压缩的图片文件。可以使用<input type="file">来创建一个文件上传按钮，并添加一个id以便后续操作。

2. 使用FileReader对象读取用户选择的图片文件，并将其转换成Data URL的形式，以便后续操作。可以通过以下代码实现：

const fileInput = document.getElementById("fileInput");
const reader = new FileReader();

fileInput.addEventListener("change", function(event) {
  const file = event.target.files[0];
  
  reader.onload = function(e) {
    const dataUrl = e.target.result;
    // 后续操作
  }

  reader.readAsDataURL(file);
});

3. 接下来，可以使用HTML5的Canvas元素来进行图片的压缩操作。创建一个Canvas元素，并通过设置其宽度和高度来指定压缩后的尺寸。

4. 使用Canvas的context对象，调用drawImage()方法将读取到的图片绘制到Canvas上。可以通过以下代码实现：

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

const image = new Image();
image.src = dataUrl;
  
image.onload = function() {
  // 计算压缩后的尺寸
  const maxWidth = 500;
  const maxHeight = 500;
  let width = image.width;
  let height = image.height;

  if (width > height) {
    if (width > maxWidth) {
      height *= maxWidth / width;
      width = maxWidth;
    }
  } else {
    if (height > maxHeight) {
      width *= maxHeight / height;
      height = maxHeight;
    }
  }

  // 设置Canvas尺寸
  canvas.width = width;
  canvas.height = height;

  // 在Canvas上绘制压缩后的图片
  ctx.drawImage(image, 0, 0, width, height);

  // 获取压缩后的图片数据URL
  const compressedDataUrl = canvas.toDataURL("image/jpeg", 0.8);

  // 压缩后的图片处理操作
  // ...
}

5. 最后，可以将压缩后的图片数据URL用于展示或上传等操作。可以通过设置img元素的src属性来显示压缩后的图片，或通过Ajax等方式将数据URL发送到服务器端。

通过以上步骤，可以使用js将图片压缩到指定大小。

### 回答3：
使用 JavaScript 将图片压缩到指定大小可以通过以下步骤实现：

1. 创建一个 <input> 元素，允许用户选择要上传的图片文件。
2. 监听 <input> 元素的 `change` 事件，当用户选择图片后触发。
3. 在 `change` 事件处理程序中，使用 `FileReader` 对象读取用户选择的图片文件。
4. 在 `FileReader` 的 `onload` 事件中，获取读取的图片数据，并创建一个新的 <img> 元素来展示图片。
5. 获取目标图片的原始宽度和高度。
6. 创建一个 <canvas> 元素，设置宽度和高度为指定的压缩大小。
7. 在 <canvas> 上绘制图片，并指定压缩后的宽度和高度。
8. 使用 `canvas.toDataURL()` 方法将压缩后的图片转换为 base64 编码的字符串。
9. 将该字符串赋值给 <img> 元素的 `src` 属性，显示压缩后的图片。

下面是一个简单的示例代码：

function compressImage(file, maxWidth, maxHeight) {
  const reader = new FileReader();
  reader.onload = function(event) {
    const img = new Image();
    img.src = event.target.result;
    img.onload = function() {
      const canvas = document.createElement('canvas');
      let width = img.width;
      let height = img.height;

      if (width > maxWidth) {
        height = Math.round(height * maxWidth / width);
        width = maxWidth;
      }

      if (height > maxHeight) {
        width = Math.round(width * maxHeight / height);
        height = maxHeight;
      }

      canvas.width = width;
      canvas.height = height;

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

      const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7);
      const compressedImage = document.createElement('img');
      compressedImage.src = compressedDataUrl;
      document.body.appendChild(compressedImage);
    };
  };
  reader.readAsDataURL(file);
}

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  compressImage(file, 800, 600); // 指定压缩大小为 800x600
});

这个示例代码通过监听文件选择事件，将选择的图片压缩后显示在页面上。使用 `<input>` 元素选择文件，并通过调用 `compressImage` 函数传入目标图片文件、最大宽度和最大高度即可实现将图片压缩到指定大小。