copper.js JQ插件 图片剪裁上传 h5+PC通用demo

资源下载路径 该资源内置源码以及相关copper.js jq等资源  https://download.csdn.net/download/weixin_40828023/12109489

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<link rel="stylesheet" type="text/css" href="css/cropper.min.css"/>

<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>

<script src="js/cropper.min.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css">

/*Logo裁剪*/

.cutLogoPicturePop{position: fixed; top: 0; left: 0;bottom: 0;right: 0; overflow: hidden; display: none; z-index: 101;}

.copperMainBox{width: 100%;height: 60%;}

.img-preview-box{width: 100%;height: 200px;background: #FFFFFF;position: absolute;bottom: 40px;left: 0;padding-top: 20px;box-sizing: border-box;}

.img-preview{border: 1px solid #CCCCCC;box-sizing: border-box;height: 160px;width: 160px;margin: 0 auto;overflow: hidden;}

.btn-group{text-align: center;position: absolute;bottom: 0;height: 40px;left: 0;width: 100%;}

.btn-group span{display: inline-block;width: 50%;height: 40px;text-align: center;line-height: 40px;font-size: 16px;}

.btn-group span:first-child{background: #CCCCCC;color: #FFFFFF;float: left;}

.btn-group span:last-child{background: red;color: #FFFFFF;float: left;}

.shenheCon{position: relative;}

.companyLogoImg .shenhe{padding: 0;display: block;width: 80px;text-align: center;height: 80px;line-height: 80px;position: absolute;top:10px;left: 0;background: #000000;opacity: 0.7;z-index: 2;}

.companyLogoImg .shenheing{color: #FFFFFF;}

.companyLogoImg .shenheNo{color: #FFFFFF;}

/*透明背景*/

.m_master{width:100%; height:100%; overflow:hidden; background:#000; filter:alpha(opacity=60);-moz-opacity:0.6;opacity: 0.6; position:fixed; top:0; left:0; z-index:99; display: none;}

</style>

</head>

<body>

<!-- 示例图片弹窗 -->

<div class="m_master"></div>

<!--Logo裁剪上传-->

<div class="cutLogoPicturePop">

<div class="copperMainBox"><img src="" alt="" id="image"></div>

<div class="img-preview-box"><div class="img-preview" style=""><img src="" /></div></div>

<!--选择后的图片进行上传 操作-->

    <form id="form_logo_photo" action="{/get_url rule='/company/UploadImageNew'/}" method="post" enctype="multipart/form-data">

        <input type="file" name="imageFile" id="chooseLogoImg" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"  value="" style="display: none;" />

    </form>

<div class="btn-group"><span class="cropper_closeBtn">取消</span><span class="cropper_sureBtn">确认</span></div>

<input type="hidden" name="" id="cropX" value="" />

<input type="hidden" name="" id="cropY" value="" />

<input type="hidden" name="" id="cropH" value="" />

<input type="hidden" name="" id="cropW" value="" />

<input type="hidden" name="" id="thumb_ratio" value="" />

</div>

<!--展示logo 以及点击选择图片-->

<div class="compnayLogoTit">

<span id="chooseLogoBtn" class="head-img">企业logo</span>

</div>

<div class="companyLogoImg" id="photo_upload_btn" class="">

<img id="photo_tx_url" class="head-img " src="./img/image.png">

</div>

<script type="text/javascript">

//实现方式

// 当前图片剪裁方式主要是,

// 选择图片后,进行上传,上传成功后,开始生成剪裁弹窗,然后取出剪裁参数,上传到后台,和后台配合完成剪裁.

//因为后台原有剪裁方法,所以前端只上传了剪裁参数,

//知识点

//1. cropper['getCroppedCanvas']({ maxWidth: 160, maxHeight: 160 }) 生成一张剪裁后图片 canvas 节点

//2. jq change 当重复选择同一张图片时,是不会重复执行该change事件, 需要将input file 的val('')清空

//3.重置图片 重新选择图片

// cropper.reset().replace(chooseImgUrl);

//4.固定定剪裁框的宽高

//minCropBoxHeight:160,

//minCropBoxWidth:160,

//cropBoxResizable:false,是否允许拖拽改变 剪裁框大小

//5.预览图

//preview: '.img-preview',

//最优结构 <div class="img-preview-box"><div class="img-preview" style=""><img src="" /></div></div>

//.img-preview{overflow:hidden}

//5.生成剪裁图片

// 如果纯前端剪裁 cropper['getCroppedCanvas']({ maxWidth: 160, maxHeight: 160 }) 生成一张剪裁后图片 canvas 节点

//前端上传剪裁后图片 思路

// 根据这个生成canvas 然后再转base64 或者 二进制流上传

//注意: 选择图片在IOS 中,会出现倒图,但是本次方案,经过IOS测试并未出现. 如果出现,就需要前端和后端一起旋转图片

var cropper=null;

var JSON_ImgInfoObj={};

$('#photo_upload_btn').click(function(){

$('#chooseLogoImg').click();

})

$('#chooseLogoImg').change(function(){

var chooseImgUrl = URL.createObjectURL($(this)[0].files[0])

$('#image').attr('src', chooseImgUrl);

    // $('#form_logo_photo').ajaxSubmit({beforeSubmit: function(){showLoading()},data:{},success: function(res){

// if(res.status){

// JSON_ImgInfoObj=res;

            if(!cropper){

                cropper = new Cropper(image, {

                    aspectRatio: 1 / 1,

                    viewMode:1,

                    autoCropArea: 0.4,//定义初始化裁剪框对比图片的比例大小,默认为0.8

                    minContainerWidth:160,//容器的最小宽度。

                    minContainerHeight:160,//容器的最小高度。

minCanvasWidth:160,//canvas的最小宽度。

minCanvasHeight:160,//canvas的最小高度。

                    touchDragZoom:true,

cropBoxResizable:false,//是否允许拖拽改变 剪裁框大小

                    minCropBoxHeight:160,

                    minCropBoxWidth:160,

                    preview: '.img-preview',

                    crop:function (e) {

                        $('#cropX').val(e.detail.x),

                        $('#cropY').val(e.detail.y),

                        $('#cropH').val(e.detail.height),

                        $('#cropW').val(e.detail.width),

                        $('#thumb_ratio').val(e.detail.rotate)

                    }

                });

            }else{

                cropper.reset().replace(chooseImgUrl);

            }

// stopLoading();

            $('.m_master, .cutLogoPicturePop').show();

// }

    // },dataType:'json'});

})

$('.cropper_closeBtn').click(function(){

$('.m_master, .cutLogoPicturePop').hide();

$('#chooseLogoImg').val(''); //清空input file val值  选择相同图片 change的bug,

})

$('.cropper_sureBtn').click(function(){

$('#chooseLogoImg').val('');

$('#photo_tx_url').hide();

$('.companyLogoImg').append(cropper['getCroppedCanvas']({ maxWidth: 160, maxHeight: 160 }))

$('.m_master, .cutLogoPicturePop').hide();

  //上传剪裁参数

// var $cropX = $('#cropX').val(),$cropY = $('#cropY').val(),$cropH = $('#cropH').val(),$cropW = $('#cropW').val(),$thumb_ratio = $('#thumb_ratio').val();

//    $.ajax({

//        type: 'post',

//        url: 'SaveLogoUpload',

//        data: {

//            cropX: $cropX,

//            cropY: $cropY,

//            cropH: $cropH,

//            cropW: $cropW,

//            cropPH: '',

//            cropPW: '',

//            url:JSON_ImgInfoObj['path'],

//            name: JSON_ImgInfoObj['name'],

//            thumb_type: JSON_ImgInfoObj['thumb_type'],

//            thumb_ratio: JSON_ImgInfoObj['thumb_ratio']

//        },

//        dataType: 'json',

//        success: function(res){

//            if(res.state){

//                alert('上传成功');

// $('#photo_tx_url').attr('src',res.image_url);

//            }else{

// alert(res.msg);

//                return false;

//            }

//        }

//    });

})

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<link rel="stylesheet" type="text/css" href="css/cropper.min.css"/>

<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>

<script src="js/cropper.min.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css">

/*Logo裁剪*/

.cutLogoPicturePop{position: fixed; top: 0; left: 0;bottom: 0;right: 0; overflow: hidden; display: none; z-index: 101;}

.copperMainBox{width: 100%;height: 60%;}

.img-preview-box{width: 100%;height: 200px;background: #FFFFFF;position: absolute;bottom: 40px;left: 0;padding-top: 20px;box-sizing: border-box;}

.img-preview{border: 1px solid #CCCCCC;box-sizing: border-box;height: 160px;width: 160px;margin: 0 auto;overflow: hidden;}

.btn-group{text-align: center;position: absolute;bottom: 0;height: 40px;left: 0;width: 100%;}

.btn-group span{display: inline-block;width: 50%;height: 40px;text-align: center;line-height: 40px;font-size: 16px;}

.btn-group span:first-child{background: #CCCCCC;color: #FFFFFF;float: left;}

.btn-group span:last-child{background: red;color: #FFFFFF;float: left;}

.shenheCon{position: relative;}

.companyLogoImg .shenhe{padding: 0;display: block;width: 80px;text-align: center;height: 80px;line-height: 80px;position: absolute;top:10px;left: 0;background: #000000;opacity: 0.7;z-index: 2;}

.companyLogoImg .shenheing{color: #FFFFFF;}

.companyLogoImg .shenheNo{color: #FFFFFF;}

/*透明背景*/

.m_master{width:100%; height:100%; overflow:hidden; background:#000; filter:alpha(opacity=60);-moz-opacity:0.6;opacity: 0.6; position:fixed; top:0; left:0; z-index:99; display: none;}

</style>

</head>

<body>

<!-- 示例图片弹窗 -->

<div class="m_master"></div>

<!--Logo裁剪上传-->

<div class="cutLogoPicturePop">

<div class="copperMainBox"><img src="" alt="" id="image"></div>

<div class="img-preview-box"><div class="img-preview" style=""><img src="" /></div></div>

<!--选择后的图片进行上传 操作-->

    <form id="form_logo_photo" action="{/get_url rule='/company/UploadImageNew'/}" method="post" enctype="multipart/form-data">

        <input type="file" name="imageFile" id="chooseLogoImg" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"  value="" style="display: none;" />

    </form>

<div class="btn-group"><span class="cropper_closeBtn">取消</span><span class="cropper_sureBtn">确认</span></div>

<input type="hidden" name="" id="cropX" value="" />

<input type="hidden" name="" id="cropY" value="" />

<input type="hidden" name="" id="cropH" value="" />

<input type="hidden" name="" id="cropW" value="" />

<input type="hidden" name="" id="thumb_ratio" value="" />

</div>

<!--展示logo 以及点击选择图片-->

<div class="compnayLogoTit">

<span id="chooseLogoBtn" class="head-img">企业logo</span>

</div>

<div class="companyLogoImg" id="photo_upload_btn" class="">

<img id="photo_tx_url" class="head-img " src="./img/image.png">

</div>

<script type="text/javascript">

//实现方式

// 当前图片剪裁方式主要是,

// 选择图片后,进行上传,上传成功后,开始生成剪裁弹窗,然后取出剪裁参数,上传到后台,和后台配合完成剪裁.

//因为后台原有剪裁方法,所以前端只上传了剪裁参数,

//知识点

//1. cropper['getCroppedCanvas']({ maxWidth: 160, maxHeight: 160 }) 生成一张剪裁后图片 canvas 节点

//2. jq change 当重复选择同一张图片时,是不会重复执行该change事件, 需要将input file 的val('')清空

//3.重置图片 重新选择图片

// cropper.reset().replace(chooseImgUrl);

//4.固定定剪裁框的宽高

//minCropBoxHeight:160,

//minCropBoxWidth:160,

//cropBoxResizable:false,是否允许拖拽改变 剪裁框大小

//5.预览图

//preview: '.img-preview',

//最优结构 <div class="img-preview-box"><div class="img-preview" style=""><img src="" /></div></div>

//.img-preview{overflow:hidden}

//5.生成剪裁图片

// 如果纯前端剪裁 cropper['getCroppedCanvas']({ maxWidth: 160, maxHeight: 160 }) 生成一张剪裁后图片 canvas 节点

//前端上传剪裁后图片 思路

// 根据这个生成canvas 然后再转base64 或者 二进制流上传

//注意: 选择图片在IOS 中,会出现倒图,但是本次方案,经过IOS测试并未出现. 如果出现,就需要前端和后端一起旋转图片

var cropper=null;

var JSON_ImgInfoObj={};

$('#photo_upload_btn').click(function(){

$('#chooseLogoImg').click();

})

$('#chooseLogoImg').change(function(){

var chooseImgUrl = URL.createObjectURL($(this)[0].files[0])

$('#image').attr('src', chooseImgUrl);

    // $('#form_logo_photo').ajaxSubmit({beforeSubmit: function(){showLoading()},data:{},success: function(res){

// if(res.status){

// JSON_ImgInfoObj=res;

            if(!cropper){

                cropper = new Cropper(image, {

                    aspectRatio: 1 / 1,

                    viewMode:1,

                    autoCropArea: 0.4,//定义初始化裁剪框对比图片的比例大小,默认为0.8

                    minContainerWidth:160,//容器的最小宽度。

                    minContainerHeight:160,//容器的最小高度。

minCanvasWidth:160,//canvas的最小宽度。

minCanvasHeight:160,//canvas的最小高度。

                    touchDragZoom:true,

cropBoxResizable:false,//是否允许拖拽改变 剪裁框大小

                    minCropBoxHeight:160,

                    minCropBoxWidth:160,

                    preview: '.img-preview',

                    crop:function (e) {

                        $('#cropX').val(e.detail.x),

                        $('#cropY').val(e.detail.y),

                        $('#cropH').val(e.detail.height),

                        $('#cropW').val(e.detail.width),

                        $('#thumb_ratio').val(e.detail.rotate)

                    }

                });

            }else{

                cropper.reset().replace(chooseImgUrl);

            }

// stopLoading();

            $('.m_master, .cutLogoPicturePop').show();

// }

    // },dataType:'json'});

})

$('.cropper_closeBtn').click(function(){

$('.m_master, .cutLogoPicturePop').hide();

$('#chooseLogoImg').val(''); //清空input file val值  选择相同图片 change的bug,

})

$('.cropper_sureBtn').click(function(){

$('#chooseLogoImg').val('');

$('#photo_tx_url').hide();

$('.companyLogoImg').append(cropper['getCroppedCanvas']({ maxWidth: 160, maxHeight: 160 }))

$('.m_master, .cutLogoPicturePop').hide();

  //上传剪裁参数

// var $cropX = $('#cropX').val(),$cropY = $('#cropY').val(),$cropH = $('#cropH').val(),$cropW = $('#cropW').val(),$thumb_ratio = $('#thumb_ratio').val();

//    $.ajax({

//        type: 'post',

//        url: 'SaveLogoUpload',

//        data: {

//            cropX: $cropX,

//            cropY: $cropY,

//            cropH: $cropH,

//            cropW: $cropW,

//            cropPH: '',

//            cropPW: '',

//            url:JSON_ImgInfoObj['path'],

//            name: JSON_ImgInfoObj['name'],

//            thumb_type: JSON_ImgInfoObj['thumb_type'],

//            thumb_ratio: JSON_ImgInfoObj['thumb_ratio']

//        },

//        dataType: 'json',

//        success: function(res){

//            if(res.state){

//                alert('上传成功');

// $('#photo_tx_url').attr('src',res.image_url);

//            }else{

// alert(res.msg);

//                return false;

//            }

//        }

//    });

})

</script>

</body>

</html>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,036评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,046评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,411评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,622评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,661评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,521评论 1赞 304
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,288评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,200评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,644评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,673评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,281评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2赞 355

推荐阅读更多精彩内容