js 压缩图片或者转换图片格式

最新推荐文章于 2025-06-05 10:39:58 发布

RSHUEN

最新推荐文章于 2025-06-05 10:39:58 发布

阅读量1.4k

点赞数

文章标签： js图片压缩前端图片压缩 img canvers file 相互转换生成缩略图片图片格式转换

本文介绍如何使用JavaScript实现图片与Canvas之间的相互转换，并提供了压缩图片至指定质量的方法。包括从URL加载图片、图片转换为Canvas、Canvas转换为dataURL、File类型转换等实用功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="jquery-2.1.0.js"></script>
    <body>
        <img id="img" style="width: 100px;height: 100px;" src="_20181122174603.jpg"  />
        <div id="canvers"></div>
        <img id="dataURL" />
        <input type="file" id="demo" />
    </body>
    <script>

//图片 file canvers 互转换
var ImageConversion={

    /*通过一个url加载所需要的图片对象，
    其中url参数传入图片的url,
    fn为回调方法,包含一个Image对象的参数*/
    urltoImage :function (url,fn){
        var img = new Image();
        img.src = url;
        img.onload = function(){
            fn(img);
        }
    },
    /*Image对象转变为一个Canvas类型对象，
    其中image参数传入一个Image对象*/
    imagetoCanvas:function (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 ;
    },
    /*Canvas对象压缩转变为一个dataURL字符串,
    其中canvas参数传入一个Canvas对象;
    quality参数传入一个0-1的number类型，表示图片压缩质量*/
    canvasResizetoDataURL:function (canvas,quality){
        return canvas.toDataURL('image/jpeg',quality);
    },
    /*Canvas对象压缩转变为一个Blob类型对象；
    其中canvas参数传入一个Canvas对象;
    quality参数传入一个0-1的number类型，表示图片压缩质量;fn为回调方法，包含一个Blob对象的参数*/
    canvasResizetoFile:function (canvas,quality,fn){
        canvas.toBlob(function(blob) {
            fn(blob);
        },'image/jpeg',quality);
    },
    /*File（Blob）类型文件转变为dataURL字符串,
    其中 file 参数传入一个File（Blob）类型文件;
    fn为回调方法，包含一个dataURL字符串的参数*/
    filetoDataURL:function (file,fn){
        var reader = new FileReader();
        reader.onloadend = function(e){
            fn(e.target.result);
        };
        reader.readAsDataURL(file);
    },
    /*dataURLtoImage(dataurl,fn) 会将一串dataURL字符串转变为Image类型文件,
    其中dataurl参数传入一个dataURL字符串,
    fn为回调方法，包含一个Image类型文件的参数*/
    dataURLtoImage:function (dataurl,fn){
        var img = new Image();
        img.onload = function() {
            fn(img);
        };
        img.src = dataurl;
    },
    /*dataURLtoFile(dataurl) 会将一串dataURL字符串转变为Blob类型对象，
    其中dataurl参数传入一个dataURL字符串*/
    dataURLtoFile:function (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对象压缩之后再变为File对象*/
		fileResizetoFile:function (file,quality,fn){
			window.ImageConversion.filetoDataURL (file,function(dataurl){
				window.ImageConversion.dataURLtoImage(dataurl,function(image){
					window.ImageConversion.canvasResizetoFile(window.ImageConversion.imagetoCanvas(image),quality,fn);
				})
			})
		}
    
    /*事例  File图片文件压缩再转成File图片文件
        var file = document.getElementById('demo').files[0];
        fileResizetoFile(file,0.6,function(res){
            console.log(res);
            //拿到res，做出你要上传的操作；
        })
        */
        
}
        
        
//图片生成canvers
var cavers=ImageConversion.imagetoCanvas($("#img")[0]);
$("#canvers").append(cavers);

//canvers 转 dataURL
var dataURL=ImageConversion.canvasResizetoDataURL(cavers,1);
$("#dataURL").attr("src",dataURL);

//dataURL 转 File 文件类型
var file=ImageConversion.dataURLtoFile(dataURL);


/*事例  File图片文件压缩再转成File图片文件 方便上传
 0->1 图片越来越大  
 * */
    var file = document.getElementById('demo').files[0];
    fileResizetoFile(file,0.1,function(res){
        console.log(res);
        //拿到res，做出你要上传的操作；
    })
    

</script>
</html>

如果需要用ajax提交图片的话,接下来的步骤看这里: https://blog.youkuaiyun.com/RSHUEN/article/details/88538238

上边的是自己汇集了下原博客的写了下适应自己的代码

转载文章: https://www.cnblogs.com/wangyulue/articles/7845410.html