js压缩图片不改变图片尺寸

96 阅读 0 评论 64 点赞

我是靠谱客的博主个性芹菜，这篇文章主要介绍js压缩图片不改变图片尺寸，现在分享给大家，希望可以做个参考。

思路：利用canvas转blob的时候通过quality控制图片质量，达到压缩的目的。此方法有个缺点。只能对图片格式为jpeg或webp的图片有效。因此压缩的时候canvas.toBlob(callback, mimeType, quality)中的mimeType要设为’image/jpeg’。压缩完成可以自行转成想要的格式。
更多参考：https://blog.csdn.net/qq_20567691/article/details/100044142

复制代码

<!DOCTYPE html>
<html lang="en">

function previewFile () {
      // js 获取文件对象
      var fileObj = document.getElementById("file").files[0];
      if (null == fileObj) {
        alert("图像上传失败，请重试！");
      }
      // 文件读取对象
      var reader = new FileReader();
      // 图片转base64（Blob对象或File对象）
      reader.readAsDataURL(fileObj);

// 读取完毕
      reader.onload = function (res) {
        // 图片转换成为base64Url
        var fileBase64 = this.result;
        console.log(this.result, res, "result")
        // 图片参数
        var imgAttr = { quality: 0.2, type: 'img/jpeg' };
        // 回调函数
        var callBack = function (base64Codes) {
          console.log(base64Codes)
          // 图片比较
          // 调用腾讯接口

};
        // 压缩图片
        photoCompress(fileBase64, imgAttr, callBack);
      };
    }

/**
 * 图片压缩
 * @explain 借助canvas对图片进行重绘（canvas2DataURL）
 * @param base64Url base64格式的图片字符串
 * @param imgAttr  重绘图片宽度、高度、质量等属性的设置
 * @param callback 该函数执行完毕后，要执行的回调函数
 * @returns
 */
    function photoCompress (base64Url, imgAttr, callback) {
      var img = new Image();
      img.src = base64Url;
      img.onload = function () {
        var that = this;
        // 默认按比例压缩
        var w = that.width,
          h = that.height,
          // 宽高比例
          scale = w / h;
        w = imgAttr.width || w;
        h = imgAttr.height || (w / scale);
        // 默认图片质量为0.7
        var quality = 0.7;
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        canvas.setAttributeNode(anw);
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量（0-1）
        if (imgAttr.quality && imgAttr.quality <= 1 && imgAttr.quality > 0) {
          quality = imgAttr.quality;
        }
        // 重绘后的图片类型
        var imgType = 'image/jpeg';
        // quality值越小，所绘制出的图像越模糊 (压缩后转base64地址)
        var base64 = canvas.toDataURL('image/jpeg', quality);
        //canvas 转为blob并上传 (压缩后转Blob二进制对象)
        canvas.toBlob(function (blob) {
          console.log(blob)
        }, 'image/jpeg', 0.2)
        // 回调函数返回base64的值
        callback(base64);
      };
    }
  </script>
</body>

</html>

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>压缩图片</title>
</head>

<body>
  <input id='file' type="file" onchange="previewFile()">
  <script>

    function previewFile () {
      // js 获取文件对象
      var fileObj = document.getElementById("file").files[0];
      if (null == fileObj) {
        alert("图像上传失败，请重试！");
      }
      // 文件读取对象
      var reader = new FileReader();
      // 图片转base64（Blob对象或File对象）
      reader.readAsDataURL(fileObj);

      // 读取完毕
      reader.onload = function (res) {
        // 图片转换成为base64Url
        var fileBase64 = this.result;
        console.log(this.result, res, "result")
        // 图片参数
        var imgAttr = { quality: 0.2, type: 'img/jpeg' };
        // 回调函数
        var callBack = function (base64Codes) {
          console.log(base64Codes)
          // 图片比较
          // 调用腾讯接口

        };
        // 压缩图片
        photoCompress(fileBase64, imgAttr, callBack);
      };
    }



    /**
 * 图片压缩
 * @explain 借助canvas对图片进行重绘（canvas2DataURL）
 * @param base64Url base64格式的图片字符串
 * @param imgAttr  重绘图片宽度、高度、质量等属性的设置
 * @param callback 该函数执行完毕后，要执行的回调函数
 * @returns
 */
    function photoCompress (base64Url, imgAttr, callback) {
      var img = new Image();
      img.src = base64Url;
      img.onload = function () {
        var that = this;
        // 默认按比例压缩
        var w = that.width,
          h = that.height,
          // 宽高比例
          scale = w / h;
        w = imgAttr.width || w;
        h = imgAttr.height || (w / scale);
        // 默认图片质量为0.7
        var quality = 0.7;
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        canvas.setAttributeNode(anw);
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量（0-1）
        if (imgAttr.quality && imgAttr.quality <= 1 && imgAttr.quality > 0) {
          quality = imgAttr.quality;
        }
        // 重绘后的图片类型
        var imgType = 'image/jpeg';
        // quality值越小，所绘制出的图像越模糊 (压缩后转base64地址)
        var base64 = canvas.toDataURL('image/jpeg', quality);
        //canvas 转为blob并上传 (压缩后转Blob二进制对象)
        canvas.toBlob(function (blob) {
          console.log(blob)
        }, 'image/jpeg', 0.2)
        // 回调函数返回base64的值
        callback(base64);
      };
    }
  </script>
</body>

</html>