本文实例为大家分享了canvas图像截取的具体代码，供大家参考，具体内容如下
<!DOCTYPE
html>
<html>
<head
lang="en">
<meta
charset="UTF-8">
<title>canvas-图像截取</title>
<style>
canvas{
border:
1px
dashed
red;
float:
left;
position:
relative;
}
</style>
</head>
<body>
<div
id="cantox"
style="position:
relative">
<canvas
id="oldcanvas"
width="500px"
height="300px">
</canvas>
<div
id="cliptox"
style="position:
absolute;display:none"></div>
</div>
<button
id
="btnclip"
style="float:
left">截取该区域</button>
<canvas
id="nowcanvas"
width="500px"
height="300px"
>
</canvas>
<script>
//获取div元素
var
cantox
=
documentgetElementById("cantox");
var
cliptox
=
documentgetElementById("cliptox");
var
btnclip
=
documentgetElementById("btnclip");
//获取到canvas元素
var
oldcanvas
=
documentgetElementById("oldcanvas");
var
nowcanvas
=
documentgetElementById("nowcanvas");
//获取canvas中的画图环境
var
oldcontext
=
oldcanvasgetContext('2d');
var
nowcontext
=
nowcanvasgetContext('2d');
var
img
=
new
Image();
imgsrc
=
"/image/liuyifeijpg";
//加载图像到canvas画布中
windowonload
=
function
(){
oldcontextdrawImage(img,0,0,oldcanvaswidth,oldcanvasheight);
}
var
startPoint;//截取图像开始坐标
var
endPoint;//截图图像的结束坐标
var
w;
//截取图像的宽度
var
h;
//截取图像的高度
var
flag
=
false;
//用于判断移动事件事物控制
//鼠标按下事件
cantoxonmousedown
=
function
(e){
flag
=
true;
cliptoxstyledisplay
=
'block';
startPoint
=
windowToCanvas(oldcanvas,
eclientX,
eclientY);
cliptoxstyleleft
=
startPointx+'px';
cliptoxstyletop
=
startPointy+'px';
}
//鼠标移动事件
cantoxonmousemove
=
function
(e){
if(flag){
cliptoxstylebackground
=
'rgba(0,0,0,05)';
endPoint
=
windowToCanvas(oldcanvas,
eclientX,
eclientY);
w
=
endPointx
-
startPointx;
h
=
endPointy
-
startPointy;
cliptoxstylewidth
=
w
+'px';
cliptoxstyleheight
=
h+'px';
}
}
//鼠标释放事件
cantoxonmouseup
=
function
(e){
flag
=
false;
}
//按钮截取事件
btncliponclick
=
function
(){
imgCut(nowcontext,img,oldcanvaswidth,oldcanvasheight,startPointx,startPointy,w,h);
}
/
图像截取函数
context:绘制环境对象
image：图像对象
imgElementW：图像显示的宽度
imgElementH：图像显示的高度
sx:截取图像的开始X坐标
sy:截取图像的开始Y坐标
w:截取图像的宽度
h:截取图像的高度
/
function
imgCut(context,image,imgElementW,imgElementH,sx,sy,w,h){
//清理画布，便于重新绘制
contextclearRect(0,0,imgElementW,imgElementH);
//计算
：比例
=
原图像/显示图像
var
ratioW
=
imagewidth/imgElementW;
var
ratioH
=
imageheight/imgElementH;
//根据截取图像的所占位置及大小计算出在原图所占的位置及大小
//drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度，
//
绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);
contextdrawImage(image,ratioWsx,ratioHsy,ratioWw,ratioHh,0,0,w,h);
}
/
坐标转换：将window中的坐标转换到元素盒子中的坐标，并返回(x,y)坐标
element：canvas元素对象
x:鼠标在当前窗口X坐标值
y:鼠标在当前窗口Y坐标值
/
function
windowToCanvas(element,x,y){
//获取当前鼠标在window中的坐标值
//
alert(eventclientX+"-------"+eventclientY);
//获取元素的坐标属性
var
box
=
elementgetBoundingClientRect();
var
bx
=
x
-
boxleft;
var
by
=
y
-
boxtop;
return
{x:bx,y:by};
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
你可以随便搞个view，胡乱设一个背景色胡乱定个宽高，用一个相对布局把你自定义的view放在上面，随便搞的view放在下面（相对布局可以重叠），然后设置这个随便搞的view的左边距，和你画的线对齐了X坐标就确定了，同样的道理上边距就是Y坐标。
以上就是关于canvas实现图像截取功能全部的内容，包括:canvas实现图像截取功能、android canvas画一条贯通屏幕的线，如何确定xy的坐标、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）