canvas截图功能

canvas实现截图并且基于截取的图片进行二次截取

canvas截图转载于

1. canvas截图

     <div class="mark" id="mark">
           <div id="clip-img-w" class="img_box" ref="bigImage" @mousewheel.stop="rollImg(swiperImgInfo.imgUrl)">
               <img id="cropperImg" :src="swiperImgInfo.imgUrl" alt="" style="width: 100%" @mousedown="move"/>
               <canvas id="drawcanvas"></canvas>
               <canvas id="clipcanvas"></canvas>
           </div>
       </div>
     	<el-button plain type="primary" size="small" @click="handleAddDefect()" class="add-defect">绘制截图</el-button>
   
   
   
   handleAddDefect() {
       console.log(this.rollImgWidth,this.rollImgHeight)
       this.cutShow = true;
       var thiz = this;
       document.getElementById('clipcanvas').style.zIndex = 4;
       var cropperImg = document.getElementById("cropperImg");
       var wrap = document.getElementById("clip-img-w");
       var width = cropperImg.offsetWidth;
       var height = cropperImg.offsetHeight;
       var clipcanvas = document.getElementById("clipcanvas");
       var drawcanvas = document.getElementById("drawcanvas");
       clipcanvas.width = cropperImg.width;
       clipcanvas.height = cropperImg.height;
       drawcanvas.width =cropperImg.width;
       drawcanvas.height = cropperImg.height;
       console.log(clipcanvas.height)
       var clipCtx = drawcanvas.getContext("2d");
       var clipImg = document.createElement("img");
       clipImg.classList.add('img_anonymous');
       clipImg.crossOrigin = "anonymous";
       clipImg.src = thiz.swiperImgInfo.imgUrl;
       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(