用js写一端图片压缩代码

### 回答1：

可以参考下面的代码：// 定义压缩参数
var quality = 0.5; // 获取图片节点
var imageNode = document.getElementById('image'); // 获取图片的base64编码
var imageData = imageNode.toDataURL("image/jpeg", quality); // 将base64数据字符串转换为Blob
var blob = dataURItoBlob(imageData); // 将Blob传输到服务器
var formData = new FormData();
formData.append('file', blob); // 创建Ajax请求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData);

### 回答2：
图片压缩是一种在前端开发中常用的技术，可以减小图片的体积，提高网页加载速度。下面是使用JavaScript来实现图片压缩的代码：

function compressImage(file, maxWidth, maxHeight, quality) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function(event) {
      const img = new Image();
      img.onload = function() {
        let width = img.width;
        let height = img.height;
        
        // 根据最大宽度和高度进行等比例缩放
        if (width > height) {
          if (width > maxWidth) {
            height *= maxWidth / width;
            width = maxWidth;
          }
        } else {
          if (height > maxHeight) {
            width *= maxHeight / height;
            height = maxHeight;
          }
        }
        
        // 创建canvas对象并设置宽高
        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        
        // 使用canvas绘制图像
        const context = canvas.getContext('2d');
        context.drawImage(img, 0, 0, width, height);
        
        // 将canvas图像转换为base64格式
        const base64 = canvas.toDataURL('image/jpeg', quality);
        
        // 返回压缩后的图片
        resolve(base64);
      };
      
      img.src = event.target.result;
    };
    
    reader.readAsDataURL(file);
  });
}

// 使用示例
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', async event => {
  const file = event.target.files[0];
  const compressedImage = await compressImage(file, 800, 600, 0.75);
  
  // 在此处处理压缩后的图片
  // compressedImage为压缩后的base64格式图片数据
});

以上代码将通过`compressImage`函数接收一个图片文件，最大宽度、最大高度和压缩质量作为参数。然后利用`FileReader`读取图片文件，使用`Image`对象获取图片的实际宽高。根据指定的最大宽度和高度进行等比例缩放，并使用`canvas`的`drawImage`方法绘制压缩后的图片。最后将`canvas`图像转换为`base64`格式，返回压缩后的图片数据。

在使用示例中，你可以通过`fileInput`元素监听文件选择的`change`事件，获取选择的图片文件，并调用`compressImage`函数进行图片压缩。在得到压缩后的图片后，你可以在相应的位置再进行其他的处理操作。

### 回答3：
图片压缩是一种常见的前端开发需求，可以通过JavaScript编写一段代码来实现。下面给出一个简单的图片压缩代码示例。

首先，我们需要获取用户选择的图片文件。可以使用HTML的<input type="file">元素来实现。然后在JavaScript中获取选中的文件，使用FileReader读取文件数据。

接下来，我们将读取的图片数据转换为图片对象，并创建一个Canvas元素。通过设置Canvas的宽度和高度，可以调整图片的尺寸。

然后，将图片绘制到Canvas上，并将Canvas转换为Base64编码的图像数据。Base64编码可以将图片数据转换为文本格式，方便传输和展示。

最后，我们可以通过设置Canvas的toDataURL()方法的第一个参数为图片格式（如'image/jpeg'）和第二个参数为图片质量（0-1之间的数值）来进行图片压缩。通常，较低的质量会导致更高的压缩率但图片质量会降低。

下面是一段示例代码：

// 获取用户选择的图片文件
const inputElement = document.querySelector('input[type="file"]');
inputElement.addEventListener('change', handleFile, false);

function handleFile(e) {
  const file = e.target.files[0];
  
  // 读取文件数据
  const reader = new FileReader();
  reader.onload = function(e) {
    const img = new Image();
    img.onload = function() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      
      // 调整图片尺寸
      canvas.width = 800; // 设置Canvas的宽度
      canvas.height = canvas.width * (img.height / img.width); // 根据图片宽高比例设置Canvas的高度
      
      // 在Canvas上绘制图片
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      
      // 将Canvas转换为Base64编码的图像数据
      const compressedImage = canvas.toDataURL('image/jpeg', 0.8); // 设置图片格式为JPEG，质量为0.8
      
      // 在控制台打印压缩后的图片数据
      console.log(compressedImage);
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

这段代码实现了基本的图片压缩功能，并将压缩后的图片数据打印到了控制台。你可以根据实际需求进行调整和优化。