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:;
             left:;
         }

         .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,所以可以直接发送给服务器,或者用于本地图直接展示

有问题,希望指正,本人刚接触前端不久,谢谢!