canvas实现图像截取功能
程序员文章站
2023-10-13 09:15:17
本文实例为大家分享了canvas图像截取的具体代码，供大家参考，具体内容如下
<...
本文实例为大家分享了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 = 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 卢伟冰：暂时没有推出小米平板5的计划