canvas截图功能

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

canvas截图转载于

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(this,0,0,timg.width,timg.height,x,y,this.width,this.height);};var ctx = clipcanvas.getContext("2d");ctx.fillStyle = 'rgba(0,0,0,0.6)';ctx.strokeStyle="rgba(0,143,255,1)";var start = null;var clipArea = {};//裁剪范围clipcanvas.onmousedown = function(e){start = {x:e.offsetX,y:e.offsetY};console.log(start.x,start.y);};clipcanvas.onmousemove = function(e){if(start){//图片缩放保证截图位置不偏移let srollX = start.x/(thiz.zoomImg/100);let srollY = start.y/(thiz.zoomImg/100);if(thiz.zoomImg === 0){fill(Math.abs(start.x),Math.abs(start.y),Math.abs(e.layerX-start.x),Math.abs(e.layerY-start.y));}else{ fill(Math.abs(start.x/(thiz.zoomImg/100)),Math.abs(start.y/(thiz.zoomImg/100)),Math.abs((e.layerX-start.x)/(thiz.zoomImg/100)),Math.abs((e.layerY-start.y)/(thiz.zoomImg/100)));}// fill(start.x,start.y,e.offsetX-start.x,e.offsetY-start.y)}};document.addEventListener("mouseup",function(){if(start){thiz.defectAddFormVisible = true;thiz.$nextTick(()=>{var img = document.getElementById("defectBox");console.log(img)start = null;var url = startClip(clipArea);img.src= url;//生成base64格式的图thiz.defectBox = url;})}});function fill(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();let cliWidth = document.getElementById("clipcanvas").width;let cliHeight = document.getElementById("clipcanvas").height;clipArea = {x:Math.abs(x),y:Math.abs(y),w:Math.abs(w),h:Math.abs(h)};var clipImgWidth = sessionStorage.getItem("clipImgWidth");var clipImgHeight = sessionStorage.getItem("clipImgHeight");let cutClipArea = {x:Math.round(clipImgWidth/cliWidth*x),y:Math.round(clipImgHeight/cliHeight*y),w:Math.round(clipImgWidth/cliWidth*w),h:Math.round(clipImgHeight/cliHeight*h)};thiz.clipArea = clipArea;// thiz.canvasWidth = clipArea.w;// thiz.canvasHeight = clipArea.h;thiz.defectAdd.cutParams = JSON.stringify(cutClipArea);}function startClip(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);}
},
/*** 打开弹窗的时候初始化*/
init(){// canvas清空画布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);function fn(){}// 移除创建的img节点,避免重复创建if($('.img_anonymous').length>0){$('.img_anonymous').remove();}//避免同一张图没有更新this.defectBox = this.swiperImgInfo.imgUrl;
},

基于canvas截取的图片进行第二次截图

        <el-col :span="10"><div class="canvas-box" id="canvas-box"><canvas id="mapcvs" :width="canvasWidth + 'px'" :height="canvasHeight + 'px'"></canvas><canvas id="cvs" :width="canvasWidth + 'px'" :height="canvasHeight + 'px'"></canvas><img :src="defectBox" alt="" id="defectBox" style="width:500px;" title="双击结束绘制"></div><el-button plain type="primary" size="small" @click="handleAddDefectDraw" class="cut-defect">绘制缺陷框</el-button></el-col>handleAddDefectDraw() { //绘制缺陷框this.cropperImg = document.getElementById('defectBox'); this.canvasWidth = this.cropperImg.clientWidth;this.canvasHeight = this.cropperImg.clientHeight;if(this.canvasWidth!=""||this.canvasHeight!=""){this.cvs = document.getElementById("cvs");this.cvsClientRect = this.cvs.getClientRects()[0];this.ctx = this.cvs.getContext('2d');this.mapcanvas = document.getElementById("mapcvs");this.mapcntx = this.mapcanvas.getContext("2d");this.flag = false;this.cvs.addEventListener("mousedown", this.mousedownHandler, false);this.cvs.addEventListener("dblclick", this.mousedbclick, false);}
},
// 鼠标按下
mousedownHandler(event){var x1="";var y1="";var widthx = document.getElementById("defectBox").clientWidth;var heighty = document.getElementById("defectBox").clientHeight;if(event.button == 0 && !this.flag) {this.points.push({x:event.pageX - this.cvsClientRect.x,y:event.pageY - this.cvsClientRect.y,});this.endX = event.offsetX;this.endY = event.offsetY;this.startX = event.offsetX;this.startY = event.offsetY;this.cvs.addEventListener("mousemove", this.mousemoveHandler, false);}
},
//绘制鼠标移入坐标
mousemoveHandler(event) {this.endX = event.offsetX;this.endY = event.offsetY;this.wwidth = this.endX - this.startX;this.wheigth = this.endY - this.startY;// 清除指定区域的所有像素this.ctx.clearRect(0,0,this.cvs.width,this.cvs.height);this.ctx.strokeStyle="red"; //矩形框颜色this.ctx.lineWidth="2"; //矩形框宽度this.ctx.strokeRect(this.startX,this.startY,this.wwidth,this.wheigth); //绘制矩形this.clipArea = {x:this.startX,y:this.startY,w:this.wwidth,h:this.wheigth}
},
//鼠标双击结束绘制
mousedbclick(event) {this.ctx.closePath();this.ctx.stroke();this.flag = true;this.defectAddFormVisible = true;this.cvs.removeEventListener("mousemove", this.mousemoveHandler);
},

样式
.img_box{
width: 1059px;
height: 706px;
position:relative;
}
.img_box>canvas{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.img_box #clipcanvas,.canvas-box #mapcvs{
z-index: 2;
}
.img_box #drawcanvas,.canvas-box #cvs{
z-index: 1;
}
.img_box img{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
.img_box>.img_group_item{
width: 250px;
height: 250px;
position: relative;
margin: 0 auto;
}
.img_box>.img_group_item img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
.defectBoxClick{
background-color:rgba(0,0,0,0);
}

canvas截图功能相关推荐

canvas快速实现视频的一键截图功能
视频的一键截图功能,在现在非常常见,但是,你知道怎么做到的吗?? 简单粗暴的原理 - 利用canvas的2d图进行绘制视频中的某一帧在进行保存 html: <videostyle="w ...
html中图片切割视频,canvas与html5实现视频截图功能示例
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频在使用canvas制作这个截图功能时,首先必须保证页面上 ...
视频截图html,canvas与html5实现视频截图功能(示例代码)
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频在使用canvas制作这个截图功能时,首先必须保证页面上 ...
js截屏 video_video结合canvas实现视频在线截图功能
给大家讲解下我前几天看到的一个有趣小demo:视频在线截图.以下是我修改和添加了新功能后的效果图: 是不是很酷,其实挺简单的,下面就给大家讲讲怎么弄哈. 这里主要分为三大块功能,首先是第一个: 利用U ...
js截屏 video_canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频在使用canvas制作这个截图功能时,首先必须保证页面上 ...
前端如何实现一键截图功能?
精彩回顾有点意思的gif动图生成平台开发实战(二) 如何实现H5可视化编辑器的实时预览和真机扫码预览功能在线IDE开发入门之从零实现一个在线代码编辑器基于React+Koa实现一个h5页面可视化 ...
vue + html2canvas + ArcGIS 3.x 地图一键截图功能踩坑之路(一)
坑有点多,层出不穷.好在还是基本做出来了... 地图情况:用了position:fixed定位,地图上还有各种自己画的线段.点.多边形区域. 功能目标:一键截图,能把地图区域的内容直接截取出来. 1. ...
android实现截图功能
原文地址:http://blog.csdn.net/hk_256/article/details/7306590 ,转载请注明出处一.基本介绍在Android 4.0 之前,Android手机上如 ...
android easyplayer截屏,EasyWasmPlayer H265播放器是如何实现视频截图功能的？
在我们做视频开发的过程中,会遇到不少需求,其中视频截图就是一个比较常见的需求,因此TSINGSEE青犀视频不管是在设计视频平台还是视频播放器的时候,我们都会在原有开发的基础上对视频截图进行一些功能拓展 ...

canvas截图功能

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

canvas截图功能相关推荐

最新文章

热门文章