截取图片一部分_canvas 实现截图功能——截取图片的一部分

实现效果：

整理一下最近在vue项目中做的一个截图功能(只能够截取图片)，即用鼠标在画布上进行框选截取。

思路大概如下：做一个弹窗，打开弹窗的时候传入要截的图，接下来在这个窗口里面，点击截图按钮，开始截图，点击取消按钮，取消截图。

窗口里面的html主要是三个部分，一个是可截图区域，一个是截取图片的回显，一个是操作按钮(截图按钮和取消截图按钮)。

部分html：

divid="clip-img-w"class="img_box">canvasid="drawcanvas">anvas>canvasid="clipcanvas">anvas>imgid="img_big":src="imgSrc">iv>divclass="img_group_item">imgid="img":src="cutImgSrc">iv>divclass="btn_box"align="center">spanclass="btn_cut"@click="cut()">pan>spanv-if="draw"class="btn_cut_cancel"@click="cancelCut()">pan>iv>

用到的data：

data(){return{
        imgSrc:'',
        cutImgSrc:'',
        draw:false};},

截图：

cut(){var thiz =this;
    thiz.draw =true;var img = document.getElementById("img");var wrap = document.getElementById("clip-img-w");var width = wrap.offsetWidth;var height = wrap.offsetHeight;var clipcanvas = document.getElementById("clipcanvas");var drawcanvas = document.getElementById("drawcanvas");
    clipcanvas.width = width;
    clipcanvas.height = height;
    drawcanvas.width = width;
    drawcanvas.height = height;var clipCtx = drawcanvas.getContext("2d");var clipImg = document.createElement("img");
    clipImg.classList.add('img_anonymous');
    clipImg.crossOrigin ="anonymous";
    clipImg.src = thiz.imgSrc;var timg = clipImg.cloneNode();
    wrap.appendChild(clipImg);
    clipImg.onload=function(){var x = Math.floor((width -this.width)/2);var y = Math.floor((height -this.height)/2);
        clipCtx.drawImage(this,0,0,timg.width,timg.height,x,y,this.width,this.height);};var ctx = clipcanvas.getContext("2d");
    ctx.fillStyle ='rgba(0,0,0,)';
    ctx.strokeStyle="rgba(0,143,255,1)";var start =null;var clipArea ={};

    clipcanvas.onmousedown=function(e){
        start ={
            x:e.offsetX,
            y:e.offsetY
        };};
    clipcanvas.onmousemove=function(e){if(start){fill(start.x,start.y,e.offsetX-start.x,e.offsetY-start.y)}};
    document.addEventListener("mouseup",function(){if(start){
            start =null;var url =startClip(clipArea);
            img.src= url;
            thiz.cutImgSrc = url;}});functionfill(x,y,w,h){
        ctx.clearRect(0,0,width,height);
        ctx.beginPath();
        ctx.globalCompositeOperation ="source-over";
        ctx.fillRect(0,0,width,height);
        ctx.globalCompositeOperation ='destination-out';
        ctx.fillRect(x,y,w,h);
        ctx.globalCompositeOperation ="source-over";
        ctx.moveTo(x,y);
        ctx.lineTo(x+w,y);
        ctx.lineTo(x+w,y+h);
        ctx.lineTo(x,y+h);
        ctx.lineTo(x,y);
        ctx.stroke();
        ctx.closePath();
        clipArea ={
            x,
            y,
            w,
            h
        };}functionstartClip(area){var canvas = document.createElement("canvas");
        canvas.width = area.w;
        canvas.height = area.h;var data = clipCtx.getImageData(area.x,area.y,area.w,area.h);var context = canvas.getContext("2d");
        context.putImageData(data,0,0);return canvas.toDataURL("image/png",1);}},

取消截图or初始化：

cancelCut(){this.draw =false;this.init();},init(){var wrap = document.getElementById("clip-img-w");var width = wrap.offsetWidth;var height = wrap.offsetHeight;var clipcanvas = document.getElementById("clipcanvas");var drawcanvas = document.getElementById("drawcanvas");
    clipcanvas.width = width;
    clipcanvas.height = height;
    drawcanvas.width = width;
    drawcanvas.height = height;var clipCtx = drawcanvas.getContext("2d");var ctx = clipcanvas.getContext("2d");
    clipCtx.clearRect(0,0,drawcanvas.width,drawcanvas.height);
    ctx.clearRect(0,0,clipcanvas.width,clipcanvas.height);
    clipcanvas.onmousedown =null;
    clipcanvas.onmousemove =null;
    document.removeEventListener("mouseup",fn(),false);functionfn(){}if($('.img_anonymous').length>0){$('.img_anonymous').remove();}this.cutImgSrc =this.imgSrc;},

部分CSS样式：

//less
//截图区域
>.img_box{width: 700px;height: 450px;position:relative;
	>canvas{width: 100%;height: 100%;position: absolute;left: 0;top: 0;
	    &#clipcanvas{z-index: 2;}&#drawcanvas{z-index: 1;}}//图片居中显示
	img{display: block;position: absolute;top: 50%;left: 50%;transform:translate(-50%, -50%);max-width: 100%;max-height: 100%;}}//回显区域
>.img_group_item{width: 250px;height: 250px;position: relative;margin: 0 auto;
    //图片居中显示
    img{position: absolute;left: 50%;top: 50%;transform:translate(-50%, -50%);max-width: 100%;max-height: 100%;}}