vue canvas实现图片绘制,canvas 截图
这篇文章主要为大家详细介绍了某视频剪辑软件项目中帆布实现截图功能，截取图片的一部分，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件项目中帆布实现截图功能的具体代码，供大家参考，具体内容如下
实现效果：
整理一下最近在某视频剪辑软件项目中做的一个截图功能（只能够截取图片),即用鼠标在画布上进行框选截取。
思路大概如下：做一个弹窗，打开弹窗的时候传入要截的图，接下来在这个窗口里面，点击截图按钮，开始截图，点击取消按钮，取消截图。
窗口里面的超文本标记语言主要是三个部分，一个是可截图区域，一个是截取图片的回显，一个是操作按钮（截图按钮和取消截图按钮)。
部分html：
！-截图区域-
div id= clip-img-w class= img _ box
画布id=drawcanvas/canvas
画布id=clipcanvas/canvas
img id=img_big :src=imgSrc
/div
！-回显区域-
div class=img_group_item
img id=img :src=cutImgSrc
/div
！-操作按钮-
div class= BTN框 align=中心
span class= BTN _ cut @ click= cut()/span
span v-if= draw class= BTN _ cut _ cancel @ click= cancel cut()/span
/div
用到的data：
data() {
返回{
//储存截图区域的图片，自己传
imgSrc: ，
//储存截图后的生成的base64图片
cutImgSrc: ，
//判断当前是否处于截图状态
平局：假
};
},
截图：
剪切(){
var thiz=this
thiz.draw=true//显示"取消截图"的按钮
var img=文档。getelementbyid( img )；
var wrap=文档。getelementbyid( clip-img-w )；
var width=wrap.offsetWidth
var height=wrap.offsetHeight
var clip canvas=文档。getelementbyid(剪辑画布)；
var draw canvas=文档。getelementbyid(绘制画布)；
clipcanvas.width=宽度
clipcanvas.height=height
drawcanvas.width=宽度
drawcanvas.height=高度
var剪辑CTX=画画布。获取上下文(“2d”)；
var clip img=文档。createelement(“img”)；
剪辑img。班级名单。add( img _ anonymous )；
剪辑img。交叉起源=匿名；
剪辑img。src=thiz。img src
var timg=剪辑img。克隆节点()；
包装。appendchild(剪辑img)；
clipImg.onload=function(){
var x=数学。地板((宽度-这个。宽度)/2)；
var y=数学。楼层((身高-这个。身高)/2)；
clipCtx.drawImage(this，0，0，timg.width，timg.height，x，y，this.width，this。身高)；
};
var CTX=剪辑画布。获取上下文(“2d”)；
ctx.fillStyle=rgba(0，0，0，0.6)；
ctx.strokeStyle=rgba(0，143，255，1)；
var start=null
var剪辑区域={ }；//裁剪范围
剪辑画布。onmousedown=function(e){
start={
x:e.offsetX，
y:e offset
};
};
剪辑画布。onmousemove=function(e){
如果（开始){
fill(start.x，start.y，e.offsetX-start.x，e.offsetY-start.y)
}
};
文档。addevent侦听器( mouseup ，function(){
如果（开始){
开始=空
var URL=开始剪辑(剪辑区域)；
img.src=url
//生成base64格式的图
thiz.cutImgSrc=url
}
});
函数填充(x，y，w，h){
ctx.clearRect(0，0，width，height)；
CTX。begin path()；
//遮罩层
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。笔画()；
CTX。关闭路径()；
剪辑区域={
x，
y，
w，
h
};
}
功能开始剪辑（区域){
var canvas=文档。createelement(“canvas”)；
画布。=面积. w
画布。高度=面积。h；
var数据=剪辑CTX。getimagedata(区域。x，area.y，area.w，area。h)；
var context=画布。获取上下文(“2d”)；
context.putImageData(data，0，0)；
返回画布。toda taurl( image/png ，1)；
}
},
取消截图or初始化：
/**
* 取消截图
*/
cancelCut(){
this.draw=false
这个。init()；
},
/**
* 打开弹窗的时候初始化
*/
init(){
//画布清空画布
var wrap=文档。getelementbyid( clip-img-w )；
var width=wrap.offsetWidth
var height=wrap.offsetHeight
var clip canvas=文档。getelementbyid(剪辑画布)；
var draw canvas=文档。getelementbyid(绘制画布)；
clipcanvas.width=宽度
clipcanvas.height=height
drawcanvas.width=宽度
drawcanvas.height=高度
var剪辑CTX=画画布。获取上下文(“2d”)；
var CTX=剪辑画布。获取上下文(“2d”)；
clipCtx.clearRect(0，0，drawcanvas.width，绘制画布。身高)；
ctx.clearRect(0，0，clipcanvas.width，剪辑画布。身高)；
//移除鼠标事件
clipcanvas.onmousedown=null
clipcanvas.onmousemove=null
文档。removeeventlistener( mouseup ，fn()，false)；
函数fn(){}
//移除创建的图片节点，避免重复创建
如果($(。img_anonymous).length0){
$(.img _ anonymous’).移除();
}
//避免同一张图没有更新
这个。cutimgsrc=this。img src
},
部分CSS样式：
//更少
//截图区域。img_box{
宽度：700像素
高度：450像素
位置：相对；
画布{
宽度：100%;
身高：100%;
位置：绝对；
左：0;
top:0；
#clipcanvas{
z指数：2;
}
#drawcanvas{
z指数：1;
}
}
//图片居中显示
img{
显示：块；
位置：绝对；
top:50%；
左：50%;
transform: translate(-50%，-50%)；
最大宽度：100%;
最大高度：100%;
}
}
//回显区域。img_group_item{
宽度：250像素
高度：250像素
位置：相对；
边距：0自动；
//图片居中显示
img{
位置：绝对；
左：50%;
top:50%；
transform: translate(-50%，-50%)；
最大宽度：100%;
最大高度：100%;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。