使用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" >
<canvas id="oldcanvas" width="500px" height="300px">
</canvas>
<div id="cliptox" ></div>
</div>
<button id ="btnclip" >截取该区域</button>
<canvas id="nowcanvas" width="500px" height="300px" >
</canvas>
<script>
//获取div元素
var cantox = document.getElementById("cantox");
var cliptox = document.getElementById("cliptox");
var btnclip = document.getElementById("btnclip");
//获取到canvas元素
var oldcanvas = document.getElementById("oldcanvas");
var nowcanvas = document.getElementById("nowcanvas");
//获取canvas中的画图环境
var oldcontext = oldcanvas.getContext('2d');
var nowcontext = nowcanvas.getContext('2d');
var img = new Image();
img.src = "./image/liuyifei.jpg";
//加载图像到canvas画布中
window.onload = function (){
oldcontext.drawImage(img,0,0,oldcanvas.width,oldcanvas.height);
}
var startPoint;//截取图像开始坐标
var endPoint;//截图图像的结束坐标
var w; //截取图像的宽度
var h; //截取图像的高度
var flag = false; //用于判断移动事件事物控制
//鼠标按下事件
cantox.onmousedown = function (e){
flag = true;
cliptox.style.display = 'block';
startPoint = windowToCanvas(oldcanvas, e.clientX, e.clientY);
cliptox.style.left = startPoint.x+'px';
cliptox.style.top = startPoint.y+'px';
}
//鼠标移动事件
cantox.onmousemove = function (e){
if(flag){
cliptox.style.background = 'rgba(0,0,0,0.5)';
endPoint = windowToCanvas(oldcanvas, e.clientX, e.clientY);
w = endPoint.x - startPoint.x;
h = endPoint.y - startPoint.y;
cliptox.style.width = w +'px';
cliptox.style.height = h+'px';
}
}
//鼠标释放事件
cantox.onmouseup = function (e){
flag = false;
}
//按钮截取事件
btnclip.onclick = function (){
imgCut(nowcontext,img,oldcanvas.width,oldcanvas.height,startPoint.x,startPoint.y,w,h);
}
/*
* 图像截取函数
* context:绘制环境对象
* image：图像对象
* imgElementW：图像显示的宽度
* imgElementH：图像显示的高度
* sx:截取图像的开始X坐标
* sy:截取图像的开始Y坐标
* w:截取图像的宽度
* h:截取图像的高度
* */
function imgCut(context,image,imgElementW,imgElementH,sx,sy,w,h){
//清理画布，便于重新绘制
context.clearRect(0,0,imgElementW,imgElementH);
//计算 ：比例 = 原图像/显示图像
var ratioW = image.width/imgElementW;
var ratioH = image.height/imgElementH;
//根据截取图像的所占位置及大小计算出在原图所占的位置及大小
//.drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度，
// 绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);
context.drawImage(image,ratioW*sx,ratioH*sy,ratioW*w,ratioH*h,0,0,w,h);
}
/*
* 坐标转换：将window中的坐标转换到元素盒子中的坐标，并返回(x,y)坐标
* element：canvas元素对象
* x:鼠标在当前窗口X坐标值
* y:鼠标在当前窗口Y坐标值
* */
function windowToCanvas(element,x,y){
//获取当前鼠标在window中的坐标值
// alert(event.clientX+"-------"+event.clientY);
//获取元素的坐标属性
var box = element.getBoundingClientRect();
var bx = x - box.left;
var by = y - box.top;
return {x:bx,y:by};
}
</script>
</body>
</html>看完上述内容，你们掌握使用canvas怎么实现一个图像截取功能的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
