canvas压缩图片转换成base64格式输出文件流

2023年5月19日下午6:48 • JavaScript

下面是使用canvas压缩图片并转换为base64格式输出文件流的完整攻略：

步骤一：html文件部分

首先，我们需要在html文件中添加一个input元素，用于选择要上传的图片。代码如下：

<label for="image_upload">选择图片:</label>
<input type="file" accept="image/*" id="image_upload">

其中，type属性为file说明该元素是用于上传文件的。accept属性为image/*，表示只能上传图片类型的文件。

步骤二：JavaScript代码部分

接下来，我们需要编写JavaScript代码，使用canvas压缩图片并将其转换为base64格式的输出文件流。

步骤2.1：获取上传文件

首先，我们需要获取用户上传的图片文件。代码如下：

var input = document.getElementById('image_upload');
var file = input.files[0];

步骤2.2：使用canvas压缩图片并转换为base64格式的输出文件流

接下来，我们需要创建一个Image对象，并将待上传的图片文件赋值给该对象的src属性。然后，我们需要监听Image对象的load事件，将图片绘制到canvas上。最后，我们使用canvas的toDataURL方法将图片转换为base64格式的输出文件流。代码如下：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = URL.createObjectURL(file);
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);

  var quality = 0.8; // 压缩比例，可调整
  var base64_data = canvas.toDataURL('image/jpeg', quality);
  console.log(base64_data);
};

上述代码中，canvas的宽度和高度分别设置为Image对象的宽度和高度。然后，我们使用drawImage方法将Image对象绘制到canvas上。toDataURL方法有两个参数。第一个参数是图片的MIME类型，也就是要输出的文件格式。第二个参数是图片的质量，取值范围是0到1。值越大，图片质量越高，但文件大小也越大。

至此，我们就完成了使用canvas压缩图片并转换为base64格式的输出文件流。

步骤2.3：完整代码示例

下面是使用canvas压缩图片并转换为base64格式输出文件流的完整代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>canvas压缩图片并转换为base64格式输出文件流</title>
</head>
<body>
  <label for="image_upload">选择图片:</label>
  <input type="file" accept="image/*" id="image_upload">
  <script>
    var input = document.getElementById('image_upload');
    var file = input.files[0];

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = URL.createObjectURL(file);
    img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);

      var quality = 0.8; // 压缩比例，可调整
      var base64_data = canvas.toDataURL('image/jpeg', quality);
      console.log(base64_data);
    };
  </script>
</body>
</html>

下面再介绍一个压缩多张图片的示例

代码片段如下

var compressImages = function(images, max_width, max_height, compress_ratio, callback) {
  var canvas = document.createElement('canvas')
  var ctx = canvas.getContext('2d')
  var compressed_images = []
  var completed_count = 0

  for (var i = 0; i < images.length; i++) {
    var img = images[i]
    var new_img = new Image()
    new_img.onload = (function(img, new_img, i) {
      return function () {
        canvas.width = Math.min(new_img.width, max_width)
        canvas.height = Math.min(new_img.height, max_height)
        var w = canvas.width, h = canvas.height
        var ratio
        if (new_img.width > max_width || new_img.height > max_height) {
          ratio = Math.min(max_width/new_img.width, max_height/new_img.height)
          w = new_img.width * ratio
          h = new_img.height * ratio
        }         
        ctx.clearRect(0, 0, w, h)
        ctx.drawImage(new_img, 0, 0, w, h)
        var base64_data = canvas.toDataURL('image/jpeg', compress_ratio)
        compressed_images[i] = base64_data
        completed_count++
        if (completed_count == images.length) {
          callback(compressed_images)
        }
      }
    })(img, new_img, i)
    new_img.src = URL.createObjectURL(img)
  }
}

这里我们封装了一个compressImages函数，该函数接受四个参数，分别是上传的图片数组、最大宽度、最大高度、压缩比例以及压缩完成后的回调函数。具体的压缩过程与之前的示例类似，不再赘述。最后，我们将压缩结果放入compressed_images数组中，并在所有图片压缩完成后回调传入的回调函数。

示例代码

var input = document.getElementById('image_upload');
input.addEventListener('change', function() {
  var files = input.files
  var images = []

  for (var i = 0; i < files.length; i++) {
    var file = files[i]
    if (file.type.indexOf('image') !== -1) {
      images.push(file)
    }
  }

  compressImages(images, 800, 800, 0.8, function(compressed_images) {
    console.log(compressed_images)
  })
})

在示例代码中，我们通过addEventListener监听文件上传事件，获取用户上传的图片文件。我们使用上述封装的compressImages函数压缩图片，并将压缩结果输出到控制台。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：canvas压缩图片转换成base64格式输出文件流 - Python技术站