页面,使用第三方插件cropper.js裁剪,同时也引用vue.js、jquery-weui.js及样式
1.先引用对应的js与插件
<script src="/kd-vote/static/js/jquery-3.3.1.js"></script>
<script src="/kd-vote/static/vue.min.js"></script>
<link href="/kd-vote/static/css/jquery-weui.css" rel="stylesheet" />
<link href="/kd-vote/static/css/weui.css" rel="stylesheet" />
<script src="/kd-vote/static/js/jquery-weui.js"></script>
<link rel="stylesheet" href="/kd-vote/static/css/cropper.min.css">
<link rel="stylesheet" href="/kd-vote/static/css/ImgCropping.css">
<script src="/kd-vote/static/js/cropper.min.js"></script>
2.html body里对应的标签
1 <div id="app"> 2 3 <div class="weui-cell"> 4 <div class="weui-cell__hd"><label class="weui-label">选择作品图片 <span style="color: red;">*</span> :</label></div> 5 <div class="weui-cell__bd"> 6 <input class="weui-input" type="file" placeholder="请选择图片" ref ="uploadFile" v-on:change="change" accept="image/*" /> 7 </div> 8 </div> 9 <div class="weui-cell"> 10 <div class="weui-cell__hd"><label class="weui-label">作品图片预览:</label></div> 11 <div class="weui-cell__bd"> 12 <img v-bind:src="imgSrc" v-if="imgSrc!=''" style=" max-width: 100%;"/> 13 <div style="min-height: 200px; width: 100%; border: 1px solid lightgray;" v-else></div> 14 </div> 15 </div> 16 <div class="weui-btn-area"> 17 <a class="weui-btn weui-btn_primary" href="#" id="submitButton" @click="submitInfo">提交</a> 18 </div> 19 20 <div style="display: none" class="tailoring-container"> 21 <div class="black-cloth" @click="closeTailor(this)"></div> 22 <div class="tailoring-content"> 23 <div class="tailoring-content-one"> 24 25 <div class="close-tailoring" @click="closeTailor(this)">×</div> 26 </div> 27 28 <div class="tailoring-content-two"> 29 <div class="tailoring-box-parcel"> 30 <img id="tailoringImg"> 31 </div> 32 <div class="preview-box-parcel"> 33 <p>图片预览:</p> 34 <div class="square previewImg"></div> 35 <!-- <div class="circular previewImg"></div>--> 36 </div> 37 </div> 38 39 <div class="tailoring-content-three"> 40 <button class="l-btn cropper-reset-btn">复位</button> 41 <button class="l-btn cropper-rotate-btn">旋转</button> 42 <button class="l-btn cropper-scaleX-btn">换向</button> 43 <button class="l-btn sureCut" id="sureCut">确定</button> 44 </div> 45 </div> 46 </div> 47 </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 | <script type= "text/javascript" > $( function (){ //实例化vue var vue = new Vue({ el: "#app" , data:{ imgSrc: "" , ysuo:1, }, mounted: function () { var self = this ; //初始化cropper功能 self.cropping(); }, methods: { //选择图片事件 change: function (e){ var self = this ; var file = e.target.files[0]; if (file){ var reads = new FileReader(); reads.readAsDataURL(file); //弹出裁剪框 $( ".tailoring-container" ).toggle(); reads.onload = function (a){ let img = new Image(); var replaceSrc = a.target.result; // 更换cropper的图片 $( '#tailoringImg' ).cropper( 'replace' , replaceSrc, false ); // 默认false,适应高度,不失真 //self.$refs.uploadFile.value = ""; }; } else { return ; } }, compress: function (img) { var self = this ; // let canvas = document.createElement( 'canvas' ); let ctx = canvas.getContext( '2d' ); var imgWidth = img.width, imgHeight = img.height; ctx.fillStyle = '#fff' ; canvas.width = imgWidth; canvas.height = imgHeight; ctx.fillRect(0, 0, imgWidth, imgHeight); ctx.drawImage(img, 0, 0, imgWidth, imgHeight); if (self.ysuo>0 && self.ysuo<1) return canvas.toDataURL( 'image/jpeg' , self.ysuo); else return canvas.toDataURL( 'image/jpeg' ); }, submitInfo: function (){ var self = this ; //这种格式的图片地址(请据据实际情况转换),self.imgSrc--> data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/........... var subData = { imgFile:self.imgSrc }; $.ajax({ type: 'post' , url: "url地址" , //contentType:false, //processData:false, data: JSON.stringify(subData), dataType: "json" , contentType: 'application/json;charset=utf-8' , success: function (res) { } }); }, cropping: 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 -100, "left" : 0 }); } else { $( ".tailoring-content" ).css({ "top" : (win_height - $( ".tailoring-content" ) .outerHeight()) / 2, "left" : (win_width - $( ".tailoring-content" ) .outerWidth()) / 2 }); } var self = this ; // 初始化cropper图片裁剪 $( '#tailoringImg' ).cropper({ viewMode:2, aspectRatio : 3 / 4, // 比例 preview : '.previewImg' , // 预览视图 guides : false , // 裁剪框的虚线(九宫格) autoCropArea : 0.8, // 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" , 90); }); // 复位 $( ".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 base64 = cas.toDataURL( 'image/jpeg' ); let img = new Image(); img.src = base64; //设置截剪后的图片宽高(不设置,则是用默认宽高) img.width = 750; img.height =1000; img.onload = function (){ //小于1m,不压缩 if (base64.length<1024*1024){ self.imgSrc = base64; return ; } //设置一个压缩比例(具体请根据实际情况设置,) self.ysuo = Math.floor(1024*1024/base64.length * 100) / 100; //开始压缩 let data = self.compress(img); //预览裁剪压缩后的图片 self.imgSrc = data; }; self.closeTailor(); // 关闭裁剪框 } }); }, closeTailor: function (){ $( ".tailoring-container" ).toggle(); } } }); }); </script> |
posted @ 2020-05-29 18:04
天若有情天亦老,人间正道是沧桑
阅读(644)
评论(0)
推荐(0)