页面代码

<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>裁剪并压缩图片上传</title> <metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <metaname="format-detection"content="telephone=no"> <linkrel="stylesheet"href="css/cropper.min.css"> <linkrel="stylesheet"href="css/ImgCropping.css"></head><bodystyle="background: #eee"><buttonclass="replaceImg"class="l-btn">更换图片</button><divstyle="width: 320px;height: 320px;border: solid 1px #555;padding: 5px;margin-top: 10px"> <imgclass="finalImg"src=""width="100%"></div><divstyle="display: none"class="tailoring-container"> <divclass="black-cloth"οnclick="closeTailor(this)"></div> <divclass="tailoring-content"> <divclass="tailoring-content-one"><labeltitle="上传图片"for="chooseImg"class="l-btn choose-btn"><inputtype="file"accept="image/jpg,image/jpeg,image/png"name="file"id="chooseImg"class="hidden"οnchange="selectImg(this)">选择图片</label><divclass="close-tailoring" οnclick="closeTailor(this)">×</div> </div> <divclass="tailoring-content-two"><divclass="tailoring-box-parcel"><imgid="tailoringImg"></div><divclass="preview-box-parcel"><p>图片预览：</p><divclass="square previewImg"></div><divclass="circular previewImg"></div></div> </div> <divclass="tailoring-content-three"><buttonclass="l-btn cropper-reset-btn">复位</button><buttonclass="l-btn cropper-rotate-btn">旋转</button><buttonclass="l-btn cropper-scaleX-btn">换向</button><buttonclass="l-btn sureCut"id="sureCut">确定</button> </div> </div></div><scriptsrc="/jquery/jquery-1.10.2.js"></script><scriptsrc="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 }); } })(); varimg_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"); }); //换向 varflagX= true; $(".cropper-scaleX-btn").on("click",function () { if(flagX){ $('#tailoringImg').cropper("scaleX", -1);flagX= false; }else{ $('#tailoringImg').cropper("scaleX", 1);flagX= true; }flagX!=flagX; }); //裁剪后的处理 varbase64url$("#sureCut").on("click",function () { if ($("#tailoringImg").attr("src") == null ){ return false; }else{ var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvasbase64url= 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 = newArrayBuffer(bytes.length); // 转换为类型化数组 var byteArray = newUint8Array(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>