图片压缩

javascript
  目录
  1. 1. 图片压缩
    1. 1.1. 代码
    2. 1.2. 总结

前端图片压缩处理

图片压缩

笔者在日常开发中，有时候会遇到上传图片接口限制大小，所以需要对图片进行压缩。

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>image-compress</title>
</head>
<body>
  <input id="input" type="file" accept="image/*" />
</body>
<script>
  let nInput = document.querySelector('#input');
  nInput.onchange = function(ev) {
    let file = this.files[0];
    imgCompress({
      file: file,
      maxWidth: 300,
      maxHeight: 300,
      callback: function(dataURL) {
        console.log(dataURL);
      }
    });
  }
  /**
   * @desc 将图片ev.target.files[0]格式直接压缩转换成base64格式
   * @param option.file 原图片文件
   * @param option.maxWidth 图片需要压缩的最大宽度
   * @param option.maxHeight 图片需要压缩的最大高度
   * @param option.callback 回调函数，参数是dataURL
   */
  function imgCompress(option) {
    var file = option.file; // 图片file
    var maxWidth = option.maxWidth; // 图片需要压缩的最大宽度 
    var maxHeight = option.maxHeight; // 图片需要压缩的最大高度
    var originWidth, originHeight; // 原图片宽高
    var targetWidth, targetHeight; // 目标图片宽高 
    var dataURL; // 最后转化成的base64图片
    var img = new Image();
    var reader = new FileReader();
    reader.readAsDataURL(file) 
    reader.onload = function(e){ 
      img.src = e.target.result;
    }
    img.onload = function() {
      targetWidth = originWidth = img.width;
      targetHeight = originHeight = img.height;
      // 等比例计算超过最大限制时缩放后的图片尺寸
      if (originWidth > maxWidth || originHeight > maxHeight) {
        if (originWidth / originHeight > 1) {
          // 宽图片
          targetWidth = maxWidth;
          targetHeight = Math.round(maxWidth * (originHeight / originWidth));
        } else {
          // 高图片
          targetHeight = maxHeight;
          targetWidth = Math.round(maxHeight * (originWidth / originHeight));
        }
      }
      // 创建画布
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      // 设置宽高度为等同于要压缩图片的尺寸
      canvas.width = targetWidth;
      canvas.height = targetHeight;
      context.clearRect(0, 0, targetWidth, targetHeight);
      //将img绘制到画布上
      context.drawImage(img, 0, 0, targetWidth, targetHeight);
      dataURL = canvas.toDataURL('image/jpeg');
      option.callback&&option.callback(dataURL);
    }
  }  
</script>
</html>

总结

这个压缩工具是传入file格式图片数据，返回base64格式数据，如果需要其他格式，可以配合格式转换进行处理。

  工具库   图片处理