html+jquery實現簡單圖片裁剪

        有了上一篇圖片放大鏡的鋪墊,今天的這個例子是縮小鏡,因為裁剪的原圖往往很大,不能在工作區域看到全部圖片,所以,要有縮小鏡來顯示,當前裁剪的區域是原圖的個部分.按照慣例首先看下效果圖:

        功能一:載入默認圖片

         功能二:選擇本地圖片

        功能三:拖拽(鼠標直接拖動工作區視窗)     

            功能四:放大,縮小(點擊按鈕放大/縮小0.5倍,鼠標滾輪圖片縮放)

 

             功能五:利用canvas繪圖裁剪圖片

             以下是源碼,分享下,防止忘記:

            html:

<script src="./javascript/jquery.min.js"></script>
<div id="workplace">
    <div id="workplacewrap">
        <div id="operateplace">
            <div class="showinfo">
            <span class="mouseposition">
                坐標(px):
                x:<span class="mouseposition-x">0</span>
                y:<span class="mouseposition-y">0</span>
            </span>
            </div>
            <div id="sourceImage">
                <img src="./images/show-window/1-1.jpg" alt="" draggable="false">
            </div>
            <div id="clipregion"></div>
            <div class="operation">
                <input id="fileselector" type="file" hidden style="">
                <label class="btn" for="fileselector">選擇文件</label>
                <span id="btn-ResizeUp" class="btn">放大</span>
                <span id="btn-ResizeDown" class="btn">縮小</span>
                <span id="btn-Clip" class="btn">裁剪</span>
            </div>
        </div>
        <div id="showwindow">
            <div class="showinfo">
            <span class="mouseposition">
                縮放比例:
                <span class="enlargeratio"></span>%
            </span>
            </div>
            <div style="position: absolute;">
                <div id="pologen"></div>
            </div>
            <div id="previewwindow">
                <img src="" alt="" draggable="false">
            </div>
            <div class="operation">
                <span class="btn">保存</span>
            </div>

        </div>
    </div>

          css:

      * {
            font-size: 14px;
            letter-spacing: 1px;
            color: #000;
            -ms-text-justify: auto;
            text-justify: auto;
            font-size: 12px;
        }

        #workplace {
            width: 100%;
            height: auto;
            background: #f4f4f4;

        }

        #workplacewrap {
            margin: 0px auto;
            width: 1200px;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: flex-start;
            border-right: 1px solid #f0f0f0;
            border-left: 1px solid #f0f0f0;
            background: #f4f4f4;
            font-family: "微軟雅黑 Light";
            padding: 5px;
        }

        #operateplace {
            padding: 4px;
            border: 1px solid #bababa;

        }

        #sourceImage {
            width: 500px;
            height: 300px;
            border: 1px solid #bababa;
            background: none;
            margin-bottom: -1px;
            overflow: hidden;
        }

        #sourceImage img {
            position: relative;
            top: 0;
            left: 0;
        }

        .btn {
            background: #aa0000;
            border: #F8F8F8;
            color: white;
            padding: 5px;
        }

        .btn:hover {
            cursor: pointer;
            background: #cc1234;
        }

        .operation {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            height: 50px;
        }

        .showinfo {

            margin-bottom: -1px;
            font-size: 12px;
        }

        #showwindow {
            justify-self: flex-end;
            align-items: flex-end;
            width: 500px;
            height: auto;
            border: #baabba 1px solid;
            margin-left: 5px;
            padding: 5px;
            overflow: hidden;
            position:relative;
        }

        #previewwindow {
            border: 1px solid #bababa;
            width: 500px;
            height: 300px;
        }
        #pologen
        {
            border:1px solid red;
            position:relative;
            display:none;
        }

                javascript:

//代碼重新修訂
class ClipTools {
        constructor() {
            this.workview = $('#sourceImage');
            this.showview = $('#previewwindow');

            this.workviewimg=$('#sourceImage>img');
            this.showviewimg = $('#previewwindow>img');
            //工作區實際尺寸,由於圖片有縮放,工作區尺寸實際是有workvimg尺寸決定的,而工作區視窗的是尺寸是固定的,本例中是500*300,這個尺寸默認就是最終截圖的尺寸
            //后面擴展,可以對工作視圖的尺寸進行調整,截出不同尺寸的圖片
            this.workvwidth = 0;
            this.workvheight = 0;
            //同樣展示框的尺寸,實際是右側展示框圖片縮放后的尺寸,本例中圖片一定要全部放入展示視窗,所以,這個尺寸是小於等於展示視窗的尺寸的
            this.showvwidth = $('#sourceImage').width();
            this.showvheight = $('#sourceImage').height();

            //右側顯示區圖片縮放后的高度
            this.showvimgheight=0;
            //右側顯示區圖片縮放后的寬度
            this.showvimgwidth=0;
            this.resizeRate = 0.5;
            this.isScrollMouseResize = false;
            //后面擴展,比如繪制裁剪區域時用,本例中沒有實際意義
            this.isClip=false;

            this.isMouseDown=false;
            //標識鼠標在工作區的坐標,offsetX 和offsetY(相對於視窗)
            this.workpos_x = 0;
            this.workpos_y = 0;

            //圖片頂點位置
            this.sourceimg_l=0;
            this.sourceimg_t=0;
            //圖片在計算拖動距離的時候,需要記錄鼠標的起始位置,在鼠標的down->move中,起始位置以鼠標的down點為基准
            this.lastMouse_x=0;
            this.lastMouse_y=0;
            //記錄圖片的原始尺寸
            this.sourceimg_w = 0;
            this.sourceimg_h = 0;
            //記錄圖片縮放的比例
            this.enlargeratio = 1.0;

            //顯示區圖片和顯示區域的比例
            this.showToSourceWidthRatio=0.1;
            this.showToSouceHeightRatio=0.1;


            this.Init = this.Init.bind(this);
            this.ImgInputFileChanged = this.ImgInputFileChanged.bind(this);
            this.ResizeUp = this.ResizeUp.bind(this);
            this.ResizeDown = this.ResizeDown.bind(this);
            this.ShowWorkPos = this.ShowWorkPos.bind(this);
            this.DrawClipRegionTosShow=this.DrawClipRegionTosShow.bind(this);
        }
        ShowWorkPos(x, y) {
            $('.mouseposition-x').text(this.workpos_x);
            $('.mouseposition-y').text(this.workpos_y);
            $(".enlargeratio").text(($("#pologen").height()/this.showvimgwidth)*100);

            this.DrawClipRegionTosShow();
        }

        Init() {
            //如果工作區域有默認圖片
            this.sourceimg_h = this.workviewimg.height();
            this.sourceimg_w = this.workviewimg.width();

            this.workvwidth = this.sourceimg_w;
            this.workvheight = this.sourceimg_h;

            this.showToSouceHeightRatio=this.showvheight/this.sourceimg_h;
            this.showToSourceWidthRatio=this.showvwidth/this.sourceimg_w;

            //右側展示區域,展示當前工作區處於圖片的區域
            //按照最小比例對圖片進行縮放

            if (this.showToSouceHeightRatio<this.showToSourceWidthRatio)
            {
                this.showvimgheight=this.showvheight;
                this.showvimgwidth=this.showToSouceHeightRatio*this.sourceimg_w;
            }
            else
            {
                this.showvimgheight=this.sourceimg_h*this.showToSourceWidthRatio;
                this.showvimgwidth=this.showvwidth;
            }
            this.showviewimg.attr('src',this.workviewimg.attr('src')).width(this.showvimgwidth).height(this.showvimgheight);

            $('#btn-Clip').click(()=>{
                let _cropCanvas = document.createElement('canvas');
                // 計算截取時從原圖片的原始長度的坐標
               //圖片有縮放等,所以要利用原始數據進行計算
                let _sy =-this.sourceimg_t/ (this.workvheight/this.sourceimg_h);
                let _sx=-this.sourceimg_l/(this.workvwidth/this.sourceimg_w);
                let _swidth=this.workview.width()/(this.workvwidth/this.sourceimg_w);
                let _sheight=this.workview.height()/(this.workvheight/this.sourceimg_h);
                let width=this.workview.width();
                let height=this.workview.height();
                //工作區域視窗就是圖片的大小
                _cropCanvas.width = width;
                _cropCanvas.height = height;
                // 繪制圖片
                _cropCanvas.getContext('2d').drawImage(this.workviewimg[0], _sx, _sy, _swidth, _sheight, 0, 0, width, height);
                // 保存圖片信息
                let _lastImageData = _cropCanvas.toDataURL('image/png');
                // 將裁剪出來的信息展示
                this.showviewimg.attr({"src": _lastImageData}).css({"width":width+"px","height":height+"px"});
                $('#pologen').css('display',"none");
                alert("裁剪成功");
            });
            $('#fileselector').on("change", this.ImgInputFileChanged);
            $("#btn-ResizeUp").click(this.ResizeUp);
            $("#btn-ResizeDown").click(this.ResizeDown);
            //this.DrawClipRegionTosShow();
            this.workviewimg.mousemove((e) => {

                if(this.isMouseDown)
                {
                    if (this.workviewimg)
                    var left_s= e.offsetX- this.lastMouse_x;
                    var top_s=e.offsetY-this.lastMouse_y;

                    this.sourceimg_l+=left_s;
                    this.sourceimg_t+=top_s;
                    this.workviewimg.css({"left":this.sourceimg_l+"px","top":this.sourceimg_t+"px"});
                }
                this.workpos_x = e.offsetX+this.sourceimg_l;
                this.workpos_y = e.offsetY+this.sourceimg_t;
                this.ShowWorkPos(e.offsetX,e.offsetY);
                return false;
            });
            //工作區滾輪事件,調整圖片縮放,相當於是微調
            this.workviewimg.on("mousewheel DOMMouseScroll",(e)=> {
                this.isScrollMouseResize=true;
                var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                    (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox

                if(delta>0)//向上滾
                {
                    if(this.enlargeratio>=1)
                    {
                        return;
                    }
                    this.workvwidth += 1;
                    this.workvheight +=this.sourceimg_h/this.sourceimg_w;
                }
                else if(delta<0)
                {
                    this.workvwidth -= 1;
                    this.workvheight -=this.sourceimg_h/this.sourceimg_w;
                }
                this.workviewimg.css({"width":this.workvwidth+"px","height":this.workvheight+"px"});
                this.workviewimg.height(this.workvheight);
                //this.DrawClipRegionTosShow();
            });

            //工作區圖片拖拽
            this.workviewimg.mousedown((e)=>{
                this.isMouseDown=true;
                 if(!this.isClip)
                 {
                     this.workviewimg.css({"cursor":"move"});
                 }
                 this.lastMouse_x=e.offsetX;
                 this.lastMouse_y=e.offsetY;
            });
            //鼠標未松開,移出工作區
            this.workviewimg.mouseleave((e)=>{
                this.isMouseDown=false;
                if(!this.isClip)
                {
                    this.workviewimg.css({"cursor":"default"});
                }
            });
            //防止鼠標松開的事件,遺漏,所以拖拽的終事件,放在body中監聽
            $('body').mouseup((e)=>{
                this.isMouseDown=false;
                if(!this.isClip)
                {
                    this.workviewimg.css({"cursor":"default"});
                }
            });
        }
        //在展示區域,標識出被截圖的范圍
        DrawClipRegionTosShow()
        {
            //1.首先將工作區左上角的位置還原到原圖的位置,因為有滾輪的放大和縮小,所以原本定義在放大或者縮小按鈕上的縮放比例不能再使用,要重新計算
            //不管是放大縮小按鈕,還是滾輪縮放的比例在工作區都是一樣的
               //計算在右側展示區,縮放后投影裁剪區域的位置
            this.showToSouceHeightRatio=this.showvheight/this.workvheight;
            this.showToSourceWidthRatio=this.showvwidth/this.workvwidth;
            let showLeft=0;
            let showTop=0;
            let showWidth=0;
            let showHeight=0;
            if (this.showToSouceHeightRatio<this.showToSourceWidthRatio)
            {
                showWidth=this.workview.width()*this.showToSouceHeightRatio;
                showHeight=this.workview.height()*this.showToSouceHeightRatio;
                showLeft=-this.sourceimg_l*this.showToSouceHeightRatio;
                showTop=-this.sourceimg_t*this.showToSouceHeightRatio;
            }
            else
            {
                showWidth=this.workview.width()*this.showToSourceWidthRatio;
                showHeight=this.workview.height()*this.showToSourceWidthRatio;
                showLeft=-this.sourceimg_l*this.showToSourceWidthRatio;
                showTop=-this.sourceimg_t*this.showToSourceWidthRatio;
            }
            $('#pologen').css({"display":"block","top":showTop+"px","left":showLeft+"px","width":showWidth+"px","height":showHeight+"px"});

        }
        ResizeDown(e) {
            this.sourceimg_t=0;
            this.sourceimg_l=0;
            this.workviewimg.css({"left":this.sourceimg_l+"px","top":this.sourceimg_t+"px"});
            //鼠標滑輪調整過尺寸,則將圖復原
            if (this.isScrollMouseResize) {
                this.enlargeratio = 1.0;
                this.workvwidth=this.sourceimg_w;
                this.workvheight=this.sourceimg_h;
                this.workviewimg.css({"width":this.sourceimg_w+"px","height":this.sourceimg_h+"px"});
            }
            this.isScrollMouseResize = false;
            //不允許對完全在工作區展示的圖片,再縮小
            if (this.workvheight < this.showvheight && this.workvwidth < this.showvwidth) {
                return;
            }
            else {
                this.enlargeratio *= this.resizeRate;
                this.workvwidth = this.sourceimg_w * this.enlargeratio;
                this.workvheight = this.sourceimg_h * this.enlargeratio;
                this.workviewimg.css({"width":this.workvwidth+"px","height":this.workvheight+"px"});
                this.DrawClipRegionTosShow();
            }
        }

        ResizeUp(e) {
            this.sourceimg_t=0;
            this.sourceimg_l=0;
            this.workviewimg.css({"left":this.sourceimg_l+"px","top":this.sourceimg_t+"px"});
            //鼠標滑輪調整過尺寸,則將圖復原
            if (this.isScrollMouseResize) {
                this.enlargeratio = 1.0;
                this.workvwidth=this.sourceimg_w;
                this.workvheight=this.sourceimg_h;
                this.workviewimg.css({"width":this.sourceimg_w+"px","height":this.sourceimg_h+"px"});

            }
            this.isScrollMouseResize = false;
            //不允許,對原樣展示的圖片再進行放大
            if (this.enlargeratio >= 1) {
                return;
            }
            else {
                this.enlargeratio /= this.resizeRate;
                this.workvwidth = this.sourceimg_w * this.enlargeratio;
                this.workvheight = this.sourceimg_h * this.enlargeratio;
                this.workviewimg.css({"width":this.workvwidth+"px","height":this.workvheight+"px"});
            }
            this.DrawClipRegionTosShow();
        }
        ImgInputFileChanged(e) {
            let file = e.target.files[0];
            let reader = new FileReader();
            reader.readAsDataURL(file);
            //讀取完成時
            reader.onloadend = (e) => {
                this.workviewimg.attr('src', e.target.result);

                this.sourceimg_h = this.workviewimg.height();
                this.sourceimg_w = this.workviewimg.width();


                this.showToSouceHeightRatio=this.showvheight/this.sourceimg_h;
                this.showToSourceWidthRatio=this.showvwidth/this.sourceimg_w;

                //右側展示區域,展示當前工作區處於圖片的區域
                //按照短邊的比例對圖片進行縮放
                if (this.showToSouceHeightRatio<this.showToSourceWidthRatio)
                {
                    this.showvimgheight=this.showvheight;
                    this.showvimgwidth=this.showToSouceHeightRatio*this.sourceimg_w;
                }
                else
                {
                    this.showvimgheight=this.sourceimg_h*this.showToSourceWidthRatio;
                    this.showvimgwidth=this.showvwidth;
                }
                this.showviewimg.attr('src',this.workviewimg.attr('src')).css({"width":this.showvimgwidth+"px","height":this.showvimgheight+"px"});

                this.DrawClipRegionTosShow();
            }


        }
    }

    $(function () {
        let clip = new ClipTools();
        clip.Init();
    })

          還有個文件保存的功能,由於裁剪之后,展示區域的圖片路徑是base64,所以可以直接發送給服務器,或者用於本地圖直接展示

          有問題,希望指正,本人剛接觸前端不久,謝謝!