基于cropper图片裁剪,兼容PC端与移动端
Posted qiuchuanji
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于cropper图片裁剪,兼容PC端与移动端相关的知识,希望对你有一定的参考价值。
所需的资源文件
<link rel="stylesheet" href="https://cdn.bootcss.com/cropper/4.0.0-beta/cropper.css"> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="https://cdn.bootcss.com/cropper/4.0.0-beta/cropper.js"></script>
html代码
<body style="background: #eee"> <button id="replaceImg" class="l-btn">更换图片</button> <div style="width: 320px;height: 320px;border: solid 1px #555;padding: 5px;margin-top: 10px"> <img id="finalImg" src="" width="100%"> </div> <!--图片裁剪框 start--> <div style="display: none" class="tailoring-container"> <div class="black-cloth" onclick="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" onchange="selectImg(this)"> 选择图片 </label> <div class="close-tailoring" onclick="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> </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> <!--图片裁剪框 end--> </body>
css代码
*{ margin: 0;padding: 0; } .l-btn{ display: inline-block; outline: none; resize: none; border: none; padding:5px 10px; background: #8C85E6; color: #fff; border:solid 1px #8C85E6; border-radius: 3px; font-size: 14px; } .l-btn:hover{ background: #8078e3; animation: anniu 1s infinite; } .l-btn:active{ box-shadow: 0 2px 3px rgba(0,0,0,.2) inset; } .hidden{ display: none; } .tailoring-container, .tailoring-container div, .tailoring-container p{ margin: 0;padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .tailoring-container{ position: fixed; width: 100%; height: 100%; z-index: 1000; top: 0; left: 0; } .tailoring-container .black-cloth{ position: fixed; width: 100%; height: 100%; background: #111; opacity: .9; z-index: 1001; } .tailoring-container .tailoring-content{ position: absolute; width: 768px; height: 560px; background: #fff; z-index: 1002; left: 0; top: 0; border-radius: 10px; box-shadow: 0 0 10px #000; padding: 10px; } .tailoring-content-one{ height: 40px; width: 100%; border-bottom: 1px solid #DDD ; } .tailoring-content .choose-btn{ float: left; } .tailoring-content .close-tailoring{ display: inline-block; height: 30px; width: 30px; border-radius: 100%; background: #eee; color: #fff; font-size: 22px; text-align: center; line-height: 30px; float: right; cursor: pointer; } .tailoring-content .close-tailoring:hover{ background: #ccc; } .tailoring-content .tailoring-content-two{ width: 100%; height: 460px; position: relative; padding: 5px 0; } .tailoring-content .tailoring-box-parcel{ width: 520px; height: 450px; position: absolute; left: 0; border: solid 1px #ddd; } .tailoring-content .preview-box-parcel{ display: inline-block; width: 228px; height: 450px; position: absolute; right: 0; padding: 4px 14px; } .preview-box-parcel p{ color: #555; } .previewImg{ width: 200px; height: 200px; overflow: hidden; } .preview-box-parcel .square{ margin-top: 10px; border: solid 1px #ddd; } .preview-box-parcel .circular{ border-radius: 100%; margin-top: 10px; border: solid 1px #ddd; } .tailoring-content .tailoring-content-three{ width: 100%; height: 40px; border-top: 1px solid #DDD ; padding-top: 10px; } .sureCut{ float: right; } @media all and (max-width: 768px) { .tailoring-container .tailoring-content{ width: 100%; min-width: 320px; height: 460px; } .tailoring-content .tailoring-content-two{ height: 360px; } .tailoring-content .tailoring-box-parcel{ height: 350px; } .tailoring-container .tailoring-box-parcel{ width: 100%; } .tailoring-container .preview-box-parcel{ display: none; } }
JS代码
//弹出框水平垂直居中 (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 }); } })(); //弹出图片裁剪框 $("#replaceImg").on("click",function () { $(".tailoring-container").toggle(); }); //图像上传 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: 3/1,//默认比例 preview: ‘.previewImg‘,//预览视图 guides: false, //裁剪框的虚线(九宫格) autoCropArea: 1, //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; }); //裁剪后的处理 $("#sureCut").on("click",function () { if ($("#tailoringImg").attr("src") == null ){ return false; }else{ var cas = $(‘#tailoringImg‘).cropper(‘getCroppedCanvas‘);//获取被裁剪后的canvas var base64url = cas.toDataURL(‘image/png‘); //转换为base64地址形式 $("#finalImg").prop("src",base64url);//显示为图片的形式 //关闭裁剪框 closeTailor(); } }); //关闭裁剪框 function closeTailor() { $(".tailoring-container").toggle(); }
以上是关于基于cropper图片裁剪,兼容PC端与移动端的主要内容,如果未能解决你的问题,请参考以下文章
一个Taro框架下跨端的图片裁剪组件:taro-cropper
支持移动端裁剪图片插件Jcrop(结合WebUploader上传)