canvas实现压缩图片的代码示例

压缩图片的代码示例

在前端开发中，有时候需要对上传的图片进行压缩，以减少图片的大小，提高页面加载的速度。本文将为您提供一个使用canvas实现图片压缩的示例代码。

首先，我们需要在HTML中创建一个input元素，用于选择上传的图片。

<input type="file" id="imageFile" accept="image/*" onchange="handleFileSelect(event)">

接下来，我们需要编写JavaScript代码来处理用户选择的图片，并使用canvas进行压缩。代码如下所示：

function handleFileSelect(event) {
  var file = event.target.files[0];
  
  var reader = new FileReader();
  reader.onload = function(event) {
    var img = new Image();
    img.onload = function() {
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      
      // 压缩图片的最大宽度和最大高度
      var maxWidth = 800;
      var maxHeight = 800;
      
      // 计算压缩后的图片大小
      var width = img.width;
      var height = img.height;
      
      if (width > height) {
        if (width > maxWidth) {
          height = Math.round(height * maxWidth / width);
          width = maxWidth;
        }
      } else {
        if (height > maxHeight) {
          width = Math.round(width * maxHeight / height);
          height = maxHeight;
        }
      }
      
      // 设置canvas的大小
      canvas.width = width;
      canvas.height = height;
      
      // 绘制压缩后的图片到canvas上
      ctx.drawImage(img, 0, 0, width, height);
      
      // 获取压缩后的图片数据
      var compressedImageData = canvas.toDataURL("image/jpeg", 0.8);
      
      // 在此处可以将compressedImageData上传到服务器或进行其他操作
      
      // 将压缩后的图片显示在页面上
      var compressedImage = document.createElement("img");
      compressedImage.src = compressedImageData;
      document.body.appendChild(compressedImage);
    };
    
    img.src = event.target.result;
  };
  
  reader.readAsDataURL(file);
}

以上代码中，我们首先获取用户选择的文件，然后创建一个FileReader对象，读取图片数据。当图片加载完成后，我们创建一个canvas元素，并利用canvas的getContext方法获取2D上下文。接着，我们根据需要压缩的最大宽度和高度对图片进行等比例缩放，并将缩放后的图片绘制到canvas上。最后，我们通过canvas的toDataURL方法获取压缩后的图片数据，并在页面上显示。

总结

借助canvas，我们可以轻松地实现图片压缩功能。以上代码示例可以实现选择图片并压缩后显示在页面上的效果。您可以根据实际需求进行修改和扩展，例如添加上传功能、自定义压缩比例等。希望本文对您有所帮助！