html5前端图片压缩

OECOM

发布于 2020-07-02 09:31:37

3.6K0

发布于 2020-07-02 09:31:37

文章被收录于专栏：OECOMOECOM

如今手机像素越来越高，造成拍出来的照片越来越大，随便拍一张就好几兆，于是乎就有了一种需求就是压缩图片，在之前压缩图片的功能是在后台操作的，之后前端亦可以进行图片的压缩功能。

前端进行图片压缩的原理很简单，就是利用canvas来进行压缩，js将file框内的图片文件读取之后，按照比例绘制到canvas上，然后将canvas保存成图片即可实现了压缩功能。

function resizeMe(img, max_width, max_height) {

        var canvas = document.createElement('canvas');
        var width = img.width;
        var height = img.height;

        // 在这里图片是等比例缩放的，调用方法时填入图片允许的最大宽度或者是最大的高度
        //如果最大宽度为0 则按照最大高度固定，宽度自适应的方式来实现
        //如果是最大高度为0，则按照最大的宽度来实现
        if(max_width==0){
	        	if (height > max_height) {
	                width = Math.round(width *= max_height / height);
	                height = max_height;
	            }
	        }
	        if(max_height==0){
	        	 if (width > max_width) {
		                height = Math.round(height *= max_width / width);
		                width = max_width;
		            }
	        }		
	canvas.width =width;
	canvas.height = height;
        var ctx = canvas.getContext("2d");
	canvas.width =width;
	canvas.height = height;
	ctx.drawImage(img,0,0, width, height);		
        return canvas.toDataURL("image/jpeg", 0.7);//这里的0.7值的是图片的质量

    }

当file框改变后读取文件

var selectFileImage = (el)=>{
	var reader = new FileReader();
	reader.readAsArrayBuffer(el.files[0]);
	var file = el.files[0]
	reader.onload = (ev) => {
		var blob = new Blob([ev.target['result']]);
		window['URL'] = window['URL'] || window['webkitURL'];
		var blobURL = window['URL'].createObjectURL(blob);
                var image = new Image();
		image.src = blobURL;
		image.onload = (e) => {
		var thumb = resizeMe(image, 200, 0,myorientation);//获得的路径是将图片转换成了base64
		$("#myImage").attr("src",thumb);					  
		}	 
}

至此，图片的压缩功能已经完全实现了

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017-09-11，如有侵权请联系 cloudcommunity@tencent.com 删除

canvas