JavaScript实现图片压缩与格式转换的完整方案

作者：阿沐时间：2026-10-22 09:51:15浏览：200

本文详细解析了JavaScript中实现图片压缩与格式转换的核心方法。通过封装urltoImage、imagetoCanvas、canvasResizetoFile等七个基础工具函数，实现了从URL、Image对象、Canvas到File/Blob及DataURL之间的灵活转换。文章进一步提供了fileResizetoFile的封装示例，展示了如何将File对象压缩后再次转为File对象以便上传，并附带等比压缩工具函数，解决前端图片处理中的常见需求。

JS前端图片处理需求分析

在处理前端图片需求时，我们通常面临多种场景：最常见的是将File对象压缩后仍保持为File对象，以便上传至远程图片服务器；有时需要将Base64字符串压缩后仍为Base64字符串，用于存入远程数据库；此外，还可能涉及Canvas画布、Image对象或直接是图片URL地址的压缩与上传。为了清晰展示这些需求，这里整理了一张关系图：

JS前端图片处理需求分析

[图片占位符]

核心转换与压缩方法

二、解决办法

如上图中所示，这里提供了七种核心方法，基本覆盖了JavaScript中大部分文件类型的转换与压缩场景，具体包括：

1、urltoImage(url,fn)：该方法通过指定的URL加载图片对象。参数url为图片地址，fn为回调函数，接收一个Image对象作为参数。具体实现代码如下：


function urltoImage (url,fn){
  var img = new Image();
  img.src = url;
  img.onload = function(){
    fn(img);
  }
};

2、imagetoCanvas(image)：此方法将Image对象转换为Canvas类型对象。参数image为传入的Image对象，实现代码如下：


function imagetoCanvas(image){
  var cvs = document.createElement("canvas");
  var ctx = cvs.getContext('2d');
  cvs.width = image.width;
  cvs.height = image.height;
  ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
  return cvs ;
};

3、canvasResizetoFile(canvas,quality,fn)：该方法将Canvas对象压缩并转换为Blob类型对象。参数canvas为输入的Canvas对象；quality为0到1之间的数值，代表压缩质量；fn为回调函数，接收一个Blob对象。实现代码如下：


function canvasResizetoFile(canvas,quality,fn){
  canvas.toBlob(function(blob) {
    fn(blob);
  },'image/jpeg',quality);
};

需要注意的是，Blob对象表示不可变的类似文件的原始数据，它不一定是JavaScript的原生数据形式。File接口基于Blob，继承了其功能并扩展以支持用户系统中的文件。在实际使用中，可将其视为File类型处理，更详细的用法可参考MDN文档。

4、canvasResizetoDataURL(canvas,quality)：该方法将Canvas对象压缩后转换为dataURL字符串。参数canvas为输入的Canvas对象；quality为0到1之间的数值，表示压缩质量。实现代码如下：


methods.canvasResizetoDataURL = function(canvas,quality){
  return canvas.toDataURL('image/jpeg',quality);
};

关于toDataURL API的具体用法，可参考MDN文档。

5、filetoDataURL(file,fn)：此方法将File（或Blob）类型文件转换为dataURL字符串。参数file为输入的File或Blob文件；fn为回调函数，接收一个dataURL字符串作为参数。实现代码如下：


function filetoDataURL(file,fn){
  var reader = new FileReader();
  reader.onloadend = function(e){
    fn(e.target.result);
  };
  reader.readAsDataURL(file);
};

6、dataURLtoImage(dataurl,fn)：该方法将dataURL字符串转换为Image类型文件。参数dataurl为输入的dataURL字符串；fn为回调函数，接收一个Image类型文件作为参数。实现代码如下：


function dataURLtoImage(dataurl,fn){
  var img = new Image();
  img.onload = function() {
    fn(img);
  };
  img.src = dataurl;
};

7、dataURLtoFile(dataurl)：此方法将dataURL字符串转换为Blob类型对象。参数dataurl为输入的dataURL字符串。实现代码如下：


function dataURLtoFile(dataurl) {
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
};

File对象压缩上传封装

三、进一步封装

针对常见的“将File对象压缩后仍变为File对象”的需求，我们可以对上述方法进行封装，参考代码如下：


function fileResizetoFile(file,quality,fn){
  filetoDataURL (file,function(dataurl){
    dataURLtoImage(dataurl,function(image){
      canvasResizetoFile(imagetoCanvas(image),quality,fn);
    })
  })
}

其中，file参数为输入的File（或Blob）类型文件；quality参数为0到1之间的数值，表示压缩质量；fn为回调函数，接收一个Blob类型文件作为参数。

其使用方式如下所示：


var file = document.getElementById('demo').files[0];
fileResizetoFile(file,0.6,function(res){
  console.log(res);
  //拿到res，做出你要上传的操作；
})

通过这种方式，图片压缩与上传流程即可轻松完成。上述八个方法已封装并发布至GitHub，欢迎Star支持。

参考文档：

MDN

JS等比压缩图片实现

ps：下面看下JS等比压缩图片的办法


function proDownImage(path,imgObj) { // 等比压缩图片工具 
  //var proMaxHeight = 185; 
  var proMaxHeight=300; 
  var proMaxWidth = 175; 
  var size = new Object();　 
  var image = new Image();　 
  image.src = path;　 
  image.attachEvent("onreadystatechange", 
  function() { // 当加载状态改变时执行此方法,因为img的加载有延迟 
    if (image.readyState == "complete") { // 当加载状态为完全结束时进入 
      if (image.width > 0 && image.height > 0) { 
        var ww = proMaxWidth / image.width; 
        var hh = proMaxHeight / image.height;　 
        var rate = (ww < hh) ? ww: hh; 
        if (rate <= 1) {　 
          alert("imgage width*rate is:" + image.width * rate); 
          size.width = image.width * rate; 
          size.height = image.height * rate; 
        } else { 
          alert("imgage width is:" + image.width);　　 
          size.width = image.width;　　 
          size.height = image.height;　　　 
        }　 
      } 
    } 
    imgObj.attr("width",size.width); 
    imgObj.attr("height",size.height); 
  }); 
}

总结

以上介绍了JS中图片压缩与转换的方法，希望对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！

作者最新文章

为什么叫JavaScript：语言命名由来及与Java的历史渊源

2026-11-05 11:37:48

JS获取当前时间年月日时分秒并格式化为YYYY-MM-DD HH：mm：ss

2026-11-04 21:25:21

不同语言间JS与Java/Python加密结果不一致怎么办

2026-11-04 18:27:23

Mock.js 拦截 Axios 和 Fetch 请求的原理与配置方法

2026-11-04 08:13:59

JS怎么获取当前日期并格式化为YYYY-MM-DD

2026-11-03 18:47:03