js 裁剪图片压缩并且上传 图片
今天接到一个比较懒的后台的要求：后台要求在裁剪图片的同时，根据文件大小来按不同比例压缩图片。
页面代码
html> <html lang="en"> <head> <meta charset="UTF-8"> <title>裁剪并压缩图片上传title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href="css/cropper.min.css"> <link rel="stylesheet" href="css/ImgCropping.css"> head> <body style="background: #eee"> <button class="replaceImg" class="l-btn">更换图片button> <div style="width: 320px;height: 320px;border: solid 1px #555;padding: 5px;margin-top: 10px"> <img class="finalImg" src="" width="100%"> div> <div style="display: none" class="tailoring-container"> <div class="black-cloth" οnclick="closeTailor(this)">div> <div class="tailoring-content"> <div class="tailoring-content-one"> <label title="上传图片" for="chooseImg" class="l-btn choose-btn"> <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" οnchange="selectImg(this)"> 选择图片 label> <div class="close-tailoring" οnclick="closeTailor(this)">×div> div> <div class="tailoring-content-two"> <div class="tailoring-box-parcel"> <img id="tailoringImg"> div> <div class="preview-box-parcel"> <p>图片预览：p> <div class="square previewImg">div> <div class="circular previewImg">div> div> div> <div class="tailoring-content-three"> <button class="l-btn cropper-reset-btn">复位button> <button class="l-btn cropper-rotate-btn">旋转button> <button class="l-btn cropper-scaleX-btn">换向button> <button class="l-btn sureCut" id="sureCut">确定button> div> div> div> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js">script> <script src="js/cropper.min.js">script> <script> //弹出框水平垂直居中 (window.onresize = function () { var win_height = $(window).height(); var win_width = $(window).width(); if (win_width <= 768){ $(".tailoring-content").css({ "top": (win_height - $(".tailoring-content").outerHeight())/2, "left": 0 }); }else{ $(".tailoring-content").css({ "top": (win_height - $(".tailoring-content").outerHeight())/2, "left": (win_width - $(".tailoring-content").outerWidth())/2 }); } })(); var img_src = "" ; //弹出图片裁剪框 $(".replaceImg").on("click",function () { $(".tailoring-container").toggle(); img_src = $(this).parent().find('.finalImg') }); //图像上传 function selectImg(file) { if (!file.files || !file.files[0]){ return; } var reader = new FileReader(); reader.onload = function (evt) { var replaceSrc = evt.target.result; //更换cropper的图片 $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真 } reader.readAsDataURL(file.files[0]); } //cropper图片裁剪 $('#tailoringImg').cropper({ aspectRatio: 1/1,//默认比例 preview: '.previewImg',//预览视图 guides: false, //裁剪框的虚线(九宫格) autoCropArea: 0.5, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8 movable: false, //是否允许移动图片 dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域 movable: true, //是否允许移动剪裁框 resizable: true, //是否允许改变裁剪框的大小 zoomable: false, //是否允许缩放图片大小 mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片 touchDragZoom: true, //是否允许通过触摸移动来缩放图片 rotatable: true, //是否允许旋转图片 crop: function(e) { // 输出结果数据裁剪图像。 } }); //旋转 $(".cropper-rotate-btn").on("click",function () { $('#tailoringImg').cropper("rotate", 45); }); //复位 $(".cropper-reset-btn").on("click",function () { $('#tailoringImg').cropper("reset"); }); //换向 var flagX = true; $(".cropper-scaleX-btn").on("click",function () { if(flagX){ $('#tailoringImg').cropper("scaleX", -1); flagX = false; }else{ $('#tailoringImg').cropper("scaleX", 1); flagX = true; } flagX != flagX; }); //裁剪后的处理 var base64url $("#sureCut").on("click",function () { if ($("#tailoringImg").attr("src") == null ){ return false; }else{ var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas base64url = cas.toDataURL('image/png'); //转换为base64地址形式 // $(".finalImg").prop("src",base64url);//显示为图片的形式 //img_src.prop("src",base64url); ImgToBase64(convertBase64ToBlob(base64url), 720, function (base64) { img_src.prop("src",base64); //可以在这里用ajax 请求后台上传图片 ，或者获取img标签src 上传 }); //关闭裁剪框 closeTailor(); } }); //关闭裁剪框 function closeTailor() { $(".tailoring-container").toggle(); } function convertBase64ToBlob(base64){ var base64Arr = base64.split(','); var imgtype = ''; var base64String = ''; if(base64Arr.length > 1){ //如果是图片base64，去掉头信息 base64String = base64Arr[1]; imgtype = base64Arr[0].substring(base64Arr[0].indexOf(':')+1,base64Arr[0].indexOf(';')); } // 将base64解码 var bytes = atob(base64String); //var bytes = base64; var bytesCode = new ArrayBuffer(bytes.length); // 转换为类型化数组 var byteArray = new Uint8Array(bytesCode); // 将base64转换为ascii码 for (var i = 0; i < bytes.length; i++) { byteArray[i] = bytes.charCodeAt(i); } // 生成Blob对象（文件对象） return new Blob( [bytesCode] , {type : imgtype}); }; function ImgToBase64(file, maxLen, callBack) { var img = new Image(); var reader = new FileReader();//读取客户端上的文件 reader.onload = function () { var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload， img.src = url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片 }; img.onload = function () { //生成比例 var width = img.width, height = img.height; //计算缩放比例 var rate = 1; if (width >= height) { if (width > maxLen) { rate = maxLen / width; } } else { if (height > maxLen) { rate = maxLen / height; } }; img.width = width * rate; img.height = height * rate; //生成canvas var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, img.width, img.height); var base64 = canvas.toDataURL('image/jpeg', getCompressRate(1,showSize(base64url))); callBack(base64); }; reader.readAsDataURL(file); } function getCompressRate(allowMaxSize,fileSize){ //计算压缩比率，size单位为MB var compressRate = 1; if(fileSize/allowMaxSize > 4){ compressRate = 0.5; } else if(fileSize/allowMaxSize >3){ compressRate = 0.6; } else if(fileSize/allowMaxSize >2){ compressRate = 0.7; } else if(fileSize > allowMaxSize){ compressRate = 0.8; } else{ compressRate = 0.9; } result6 = compressRate; return compressRate; } function showSize(base64url) { //获取base64图片大小，返回MB数字 var str = base64url.replace('data:image/png;base64,', ''); var equalIndex = str.indexOf('='); if(str.indexOf('=')>0) { str=str.substring(0, equalIndex); } var strLength=str.length; var fileLength=parseInt(strLength-(strLength/8)*2); // 由字节转换为MB var size = ""; size = (fileLength/(1024 * 1024)).toFixed(2); var sizeStr = size + ""; //转成字符串 var index = sizeStr.indexOf("."); //获取小数点处的索引 var dou = sizeStr.substr(index + 1 ,2) //获取小数点后两位的值 if(dou == "00"){ //判断后两位是否为00，如果是则删除00 return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2) } return parseInt(size); } script> body> html>
效果图
需要引用的js
cropper.min.js
项目下载
https://download.csdn.net/download/weixin_42406046/10501154 点击下载