jq自定义裁剪，代码超级简单，易修改

最新推荐文章于 2020-09-30 12:39:33 发布

qq_38323724

最新推荐文章于 2020-09-30 12:39:33 发布

阅读量203

点赞数

本文链接：https://blog.csdn.net/qq_38323724/article/details/84967710

版权

1.自定义宽高效果

　　1.html 代码 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery-1.12.4.min.js"></script>
</head>
<body>
<img class="source" src="./test2.jpg" alt="">
<img src="" class="target" alt="">

</body>
</html>

　　2.添加插件代码

 (function ($) {
        $.fn.photoCrop=function (option) {
            var opt={
                img:'',
                fixedScale:9/5,
                isHead:null,
                maxWidth:'1400',
                maxHeight:'800',
                callBack:function () {}
            }
            opt=$.extend(opt,option);
            var _this=this;
            var imgSrc=opt.img ? opt.img:_this.attr('src');
            var photoCropBox=$('<div id="photoCropBox" style="position: fixed;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0,0,0,0.5);z-index: 99999;padding: 20px;">' +
                '<canvas id="cropCanvas" style="position: absolute;opacity:1;left: 0;top: 0;z-index: 100"></canvas><img  id="dataImg" src="'+imgSrc+'" style="opacity: 0;position: absolute" alt=""><div id="photoCropBox-panel-box" style="position: relative;width: 100%;height: 100%;">' +
                '<div id="photoCropBox-panel" style="opacity:0;background: #eee;border-radius: 5px;max-width: '+opt.maxWidth+'px;max-height: '+opt.maxHeight+'px;position: absolute;text-align: center"><div id="photoCropBox-img" style="margin: 40px 60px 20px;display: inline-block;position: relative">' +
                '<img src="'+imgSrc+'" style="max-width: 100%;display: block;max-height: 100%;max-height: '+(opt.maxHeight-110)+'px;" alt=""></div><div id="photoCropBox-option" style="text-align: right;padding-right: 50px;padding-bottom: 20px;position: relative;z-index: 2"><span id="photoCropBox-end">裁剪</span><span id="photoCropBox-start">手动裁剪</span><span id="photoCropBox-cancel">取消</span></div></div>' +
                '</div></div>');
            $('body').append(photoCropBox);
            var _box=$('#photoCropBox-img');
            var imgWidth=_box.find('img').width();

            $('#photoCropBox-option span').css({
                lineHeight:'30px',
                background:'#000',
                color:'#fff',
                display:'inline-block',
                paddingLeft:'20px',
                paddingRight:'20px',
                marginRight:'5px',
                cursor:'pointer'
            })

            var cropBox=$('<div id="photoCropBox-cropBox" style="position: absolute;z-index: 5;cursor: Move;display: none">' +
                '<div id="cropBoxLine" style="overflow: hidden;position: absolute;width: 100%;height: 100%;">' +
                '<img src="'+imgSrc+'" style="display: block;width: '+_box.find('img').width()+'px;position: absolute;max-height: none;max-width: none" alt="">' +
                '<div class="top line" style="width: 100%;height: 1px;top: 0;left: 0;"></div><div class="right line" style="height: 100%;width: 1px;top: 0;right: 0"></div>' +
                '<div class="line bottom" style="width: 100%;height: 1px;bottom: 0px;left: 0"></div><div class="left line" style="height: 100%;width: 1px;top: 0;left: 0"></div></div>' +
                '<div id="cropBoxLine2"><div class="left line2" style="height: 100%;width: 1px;top: 0;left: 0;cursor: w-resize"></div><div class="right line2" style="height: 100%;width: 1px;top: 0;right: 0;cursor: e-resize"></div><div class="top line2" style="width: 100%;height: 1px;top: 0;left: 0;cursor: n-resize;position: absolute"></div><div class="bottom line2" style="width: 100%;height: 1px;bottom: 0px;left: 0;cursor: s-resize"></div>' +
                '<div class="left bot" style="left: -3px;top: 50%;margin-top: -4px;cursor: w-resize"></div><div class="right bot" style="right: -3px;top: 50%;margin-top: -4px;cursor: e-resize"></div><div class="bottom bot" style="bottom: -3px;left: 50%;margin-left: -4px;cursor: s-resize"></div><div class="top bot" style="top: -3px;left: 50%;margin-left: -4px;cursor: n-resize"></div>' +
                '<div class="left-top bot" style="left: -3px;top: -3px;cursor: nw-resize"></div><div class="left-bottom bot" style="left: -3px;bottom: -3px;cursor: sw-resize"></div><div class="right-top bot" style="right: -3px;top: -3px;cursor: ne-resize"></div><div class="right-bottom bot"style="right: -3px;bottom: -3px;cursor: se-resize"></div></div></div>');
            var screen=$('<div id="photoCropBox-bg" style="background: rgba(0,0,0,.5);position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 4;cursor: crosshair;display: none"></div>')
            _box.append(cropBox);
            _box.append(screen);
            var _corp=$('#photoCropBox-cropBox');
            var cropBoxLine=$('#cropBoxLine');
            setTimeout(function () {
                console.log(imgWidth)
                cropBoxLine.find('img').css('width',_box.find('img').width()+'px')
            },20)
            if(opt.isHead){
                cropBoxLine.css({borderRadius:'100%'})
            }
            $('#photoCropBox-cropBox .line,#photoCropBox-cropBox .line2').css({
                background:'url(./img/Jcrop.gif)',
                position:'absolute',
                opacity:.5
            })
            $('#photoCropBox-cropBox .bot').css({
                background:'rgba(0,0,0,0.5)',
                position:'absolute',
                width:7,
                height:7,
                border:'1px #999 solid'
            })
            setTimeout(function () {
                init();
            },10)
            $(window).on('resize',function () {
                setPosition();
            })
            $('#photoCropBox-cancel').on('click',function () {
                closeBox();
            })
            $('#photoCropBox-bg').on('mousedown',function (e) {
                if(opt.fixedScale) return  //固定
                $('#cropBoxLine2').hide();
                var _this=$(this);
                var _sx=e.pageX,_sy=e.pageY;
                var _tx=_this.offset().left;
                var _ty=_this.offset().top;
                $(document).on('mousemove',function (e) {
                    e.preventDefault();
                    var _ex=e.pageX,_ey=e.pageY;
                    getPosition(_ex,_ey,_ty,_tx,_sx,_sy,_this)
                })
                $(document).on('mouseup',function () {
                    $(document).unbind('mousemove');
                    $('#cropBoxLine2').show();
                })
            })
            var lock=false;
            _corp.on('mousedown',function (e) {
                if(lock){return}
                var _sx=e.pageX,_sy=e.pageY;
                var pW=$('#photoCropBox-bg').width(),pH=$('#photoCropBox-bg').height();
                var _this=$(this),_thisX=parseInt(_this.css('left')),_thisY=parseInt(_this.css('top')),_thisW=parseInt(_this.css('width')),_thisH=parseInt(_this.css('height'));
                $(document).on('mousemove',function (e) {
                    e.preventDefault();
                    var _ex=e.pageX,_ey=e.pageY;
                    var _x=_ex-_sx,_y=_ey-_sy;
                    _x+=_thisX;_y+=_thisY;
                    if(_x<0) _x=0;
                    if(_y<0) _y=0;
                    if(_y>pH-_thisH) _y=pH-_thisH;
                    if(_x>pW-_thisW) _x=pW-_thisW;
                    resizeCropBox("","",_y,_x,true)
                })
                $(document).on('mouseup',function () {
                    $(document).unbind('mousemove');
                })
            })
            //控制大小
            $('#cropBoxLine2 .bot').on("mousedown",function (e) {
                lock=true;
                var _esx=e.pageX,_esy=e.pageY;
                var _that=$(this);
                var _this=$('#photoCropBox-bg');
                var _tx=_this.offset().left;
                var _ty=_this.offset().top;
                var _sx=_corp.offset().left,_sy=_corp.offset().top;//裁剪框
                if(_that.hasClass('right-top')) _sy+=_corp.height();
                if(_that.hasClass('left-top')){
                    _sy+=_corp.height();
                    _sx+=_corp.width();
                }
                if(_that.hasClass('left-bottom')) _sx+=_corp.width();
                $(document).on('mousemove',function (e) {
                    e.preventDefault();
                    var _ex=e.pageX,_ey=e.pageY;
                    if(opt.fixedScale){
                        _ey=(_ex-_esx)/opt.fixedScale+_esy;
                        if(_that.hasClass('right-top') || _that.hasClass('left-bottom')){
                            _ey=(_esx-_ex)/opt.fixedScale+_esy;
                        }
                    }
                    getPosition(_ex,_ey,_ty,_tx,_sx,_sy,_this)
                })
                $(document).on('mouseup',function () {
                    $(document).unbind('mousemove');
                    lock=false;
                })
            })
            $('#cropBoxLine2 .left,#cropBoxLine2 .top,#cropBoxLine2 .right,#cropBoxLine2 .bottom').on('mousedown',function (e) {
                if(opt.fixedScale) return  //固定
                lock=true;
                var _that=$(this);
                var _this=$('#photoCropBox-bg');
                var _tx=_this.offset().left;//
                var _ty=_this.offset().top;
                var _sx=_corp.offset().left,_sy=_corp.offset().top;
                var ch=_corp.height(),cw=_corp.width();
                if(_that.hasClass('top')){
                    _sy+=ch;
                }else if(_that.hasClass('left')) {
                    _sx+=cw;
                }
                $(document).on('mousemove',function (e) {
                    e.preventDefault();
                    var _ex=e.pageX,_ey=e.pageY;
                    if(_that.hasClass('top') || _that.hasClass('bottom')){
                        if(!(_ey-_sy>0)){
                            var _x=_sx-_tx,_y=_ey-_ty,_w=cw,_h=-(_ey-_sy);
                            if(_y<0) {_y=0;_h=_sy-_ty;}
                        }else{
                            var _x=_sx-_tx,_y=_sy-_ty,_w=cw,_h=_ey-_sy;
                            if(_h>_this.height()-_y) _h=_this.height()-_y;
                        }
                    }else {
                        if(_ex-_sx>0 && _ey-_sy>0){
                            var _x=_sx-_tx,_y=_sy-_ty,_w=_ex-_sx,_h=ch;
                            if(_w>_this.width()-_x) _w=_this.width()-_x;
                        }else if(!(_ex-_sx>0) && _ey-_sy>0){
                            var _x=_ex-_tx,_y=_sy-_ty,_w=-(_ex-_sx),_h=ch;
                            if(_x<0) {_x=0;_w=_sx-_tx;}
                        }
                    }
                    resizeCropBox(_w,_h,_y,_x);
                })

                $(document).on('mouseup',function () {
                    $(document).unbind('mousemove');
                    lock=false;
                })
            })

            $('#photoCropBox-start').on('click',function () {
                _corp.css('display','block')
                $('#photoCropBox-bg').css('display','block')
            })
            $('#photoCropBox-end').on('click',function () {
                getImage()
                closeBox()
            })
            function init() {
                setPosition()
                if(opt.fixedScale){
                    if((_box.height()-_box.width()/opt.fixedScale/2)<0){
                        resizeCropBox(_box.height()*opt.fixedScale,_box.height(),0,(_box.width()-_box.height()*opt.fixedScale)/2)
                    }else {
                        resizeCropBox(_box.width()/2,_box.width()/opt.fixedScale/2,(_box.height()-_box.width()/opt.fixedScale/2)/2,_box.width()/4)
                    }
                }else {
                    resizeCropBox(_box.width()/2,_box.height()/2,_box.height()/4,_box.width()/4)
                }

                if(opt.fixedScale) {
                    $('.bot.top,.bot.left,.bot.bottom,.bot.right').remove();//固定
                }
            }
            function setPosition() {
                $('#photoCropBox-panel').css({
                    top:($('#photoCropBox-panel-box').height()-$('#photoCropBox-panel').height())/2+'px',
                    left:($('#photoCropBox-panel-box').width()-$('#photoCropBox-panel').width())/2+'px',
                    opacity:1
                })
            }
            //结束x,y  背景x,y
            function getPosition(_ex,_ey,_ty,_tx,_sx,_sy,_this) {
                if(_ex-_sx>0 && _ey-_sy>0){
                    var _x=_sx-_tx,_y=_sy-_ty,_w=_ex-_sx,_h=_ey-_sy;
                    if(_w>_this.width()-_x) _w=_this.width()-_x;
                    if(_h>_this.height()-_y) _h=_this.height()-_y;
                }else if(!(_ex-_sx>0) && _ey-_sy>0){
                    var _x=_ex-_tx,_y=_sy-_ty,_w=-(_ex-_sx),_h=_ey-_sy;
                    if(_x<0) {_x=0;_w=_sx-_tx;}
                    if(_h>_this.height()-_y) _h=_this.height()-_y;
                }else if(!(_ex-_sx>0) && !(_ey-_sy>0)){
                    var _x=_ex-_tx,_y=_ey-_ty,_w=-(_ex-_sx),_h=-(_ey-_sy);
                    if(_x<0) {_x=0;_w=_sx-_tx;}
                    if(_y<0) {_y=0;_h=_sy-_ty;}
                }else if(_ex-_sx>0 && !(_ey-_sy>0)){
                    var _x=_sx-_tx,_y=_ey-_ty,_w=_ex-_sx,_h=-(_ey-_sy);
                    if(_y<0) {_y=0;_h=_sy-_ty;}
                    if(_w>_this.width()-_x) _w=_this.width()-_x;
                }
                if(opt.fixedScale){
                    if(_w/opt.fixedScale>_h){
                        _w=_h*opt.fixedScale
                    }else if (_w<opt.fixedScale*_h){
                        _h=_w/opt.fixedScale
                    }
                }
                resizeCropBox(_w,_h,_y,_x);
            }
            var c=document.getElementById("cropCanvas");
            var ctx=c.getContext("2d");
            var img=$('#dataImg');
            function getImage() {
                var scale=$('#photoCropBox-img').width()/$('#dataImg').width();
                var sx=parseInt(_corp.css('left'))/scale;
                var sy=parseInt(_corp.css('top'))/scale;
                var swidth=parseInt(_corp.css('width'))/scale;
                var sheight=parseInt(_corp.css('height'))/scale;
                var c_img = new Image;
                c_img.onload = function () {
                    ctx.drawImage(c_img,sx,sy,swidth,sheight,0,0,swidth,sheight);
                    var url=c.toDataURL("image/jpeg");
                    opt.callBack(url);
                };
                c_img.crossOrigin = 'anonymous'; //可选值：anonymous，*
                c_img.src = imgSrc
                c.width = swidth;
                c.height = sheight;

            }
            //宽，高,top,left,m-是否是拖拽
            function resizeCropBox(w,h,t,l,m) {
                _corp.css(prefix()+'transition','all 0s');
                if(!m){
                    _corp.css({
                        width:w,
                        height:h,
                        top:t+'px',
                        left:l+'px'
                    })
                }else {
                    _corp.css({
                        top:t+'px',
                        left:l+'px'
                    })
                }
                cropBoxLine.find('img').css({
                    top:-t+'px',
                    left:-l+'px'
                })
            }
            function closeBox() {
                $('#photoCropBox').remove();
            }
            function prefix() {
                var prefixes=['','-ms-','-moz-','-webkit-','-o-'],i=0;
                while (i < prefixes.length){
                    if($('body').css(prefixes[i]+'transition')){
                        return prefixes[i];
                    }
                    i++;
                }
            }

        }
    })(jQuery)

　　3.绑定代码

   $(function () {
        $('.source').on('click',function () {
            $(this).photoCrop({
                fixedScale:false,
                isHead:false,
                callBack:function(url){
                    $('.target').attr('src',url)
                },
            });
        })

    })

2.宽高比例固定效果

　　代码：

  $(function () {
        $('.source').on('click',function () {
            $(this).photoCrop({
                fixedScale:5/6,
                isHead:false,
                callBack:function(url){
                    $('.target').attr('src',url)
                },
            });
        })
    })

3.头像裁剪效果

　　代码：

  $(function () {
        $('.source').on('click',function () {
            $(this).photoCrop({
                fixedScale:1,
                isHead:true,
                callBack:function(url){
                    $('.target').attr('src',url)
                },
            });
        })
    })

以上代码易修改，大家可以自行扩展。

个人博客：很多好用的 npm 包，可以看看 https://gilea.cn/　

http://www.cnblogs.com/jiebba 我的博客，来看吧！