$(function() { //弹窗初始化 $('body').append('
'); //上传图片 $('.up-btn img').each(function(){ if(!$(this).attr('src') == ''){ $(this).addclass('up-pic-show'); } }) var set =false; $('body').on('click', '.up-btn', function(){ $(this).next().click(); if($(this).attr('data-scale')){ set = true; $('.scale-box').hide(); var setscale= $(this).attr('data-scale').split(","); $image.cropper("setaspectratio", setscale[0]/setscale[1]); $('.preview-01').css('height',$('.preview').width()/setscale[0]*setscale[1]); }else{ set = false; $('.scale-box').show(); $('.scale-list li').eq(0).find('a').addclass('on').parent().siblings().find('a').removeclass('on'); $image.cropper("setaspectratio", 800/800); } }); $('.rot-15-l').click(function(){ $image.cropper("rotate", -90); }) $('.rot-15-r').click(function(){ $image.cropper("rotate",90); }) layui.use('layer', function(){ var layer = layui.layer; }); //裁剪工具 var $image = $(".cropper"), console = window.console || { log: $.noop }, cropper; $image.cropper({ preview: ".preview", autocroparea: 1, }); var btnelem,epicbox,filename,source,sresult; $('body').on('change', '.file', function(e){ btnelem = this; var v = $(this).val(); filelast = v.lastindexof("."); filename = v.substring(v.lastindexof("\\")+1,filelast); var reader = new filereader(); reader.onload = (function (file) { return function (e) { sresult = this.result; dealimage(this.result, 1000, printing); function printing(base64) { cropper(base64); sresult = base64; } }; })(e.target.files[0]); reader.readasdataurl(e.target.files[0]); //设置比例 if(!set){ scale(); } }); //弹窗 function cropper(base){ $(".cropper").cropper("replace", base); epicbox = layer.open({ type: 1, shade: 0.5, skin: 'layui-layer-cjxm', title: '图片裁剪', content: $('.tx-edit-box'), end: function(index, layero) { //清空待上传图像 $('.file').val(''); } }); } //关闭弹窗 $('html').on('click', '.rw-del', function() { layer.close(epicbox); }); //保存按钮 $('body').on('click', '.tx-save-btn', function() { layer.close(epicbox); if(source){ var size = json.stringify($image.cropper("getdata")); var dataurl = $image.cropper("getdataurl", { width: size.width, height: size.height }); }else{ //输出图像大小 var dataurl = $image.cropper("getdataurl", { width: picw, height: pich }); } console.log(dataurl) //上传事件 if($(btnelem).prev().find('img').length>0){ //输出 $(btnelem).prev().find('img').attr('src',dataurl).addclass('up-pic-show'); }else{ //输出列表 $(btnelem).prevall('.up-pic-list').append('