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
function compressImage(file, maxWidth, maxHeight, quality, callback) {
    // 创建FileReader读取文件
    let reader = new FileReader();
    reader.readAsDataURL(file);
 
    reader.onload = e => {
      let img = new Image();
      img.src = e.target.result;
 
      img.onload = () => {
        // 计算压缩后的大小
        let ratio = Math.min(maxWidth / img.width, maxHeight / img.height);
        let width = Math.min(maxWidth, img.width * ratio);
        let height = Math.min(maxHeight, img.height * ratio);
 
        // 创建canvas用于重新绘制图片
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);
 
        // 将canvas的内容转为blob文件
        canvas.toBlob(blob => {
          callback(blob);
        }, 'image/jpeg', quality);
      };
    };
 
    reader.onerror = error => {
      console.error('Error: ', error);
    };
  }
 
  function compressImagePromise(file, maxWidth, maxHeight, quality) {
    return new Promise((resolve, reject) => {
      compressImage(file, maxWidth, maxHeight, quality, (compressedFile) => {
        if (compressedFile) {
          resolve(compressedFile);
        } else {
          reject(new Error('图片压缩失败'));
        }
      });
    });
  }

  上面代码是把file问价压缩的代码,下面是调用的代码

   调用并转换会file文件

posted on   李子骞  阅读(138)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示