canvas实现图像截取功能
更新时间：2017年02月06日 16:24:20 作者：蓝丶木鱼
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了十分钟教你上手ES2020新特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
renderjs是一个运行在视图层的js,它只支持app-vue和h5,下面这篇文章主要给大家介绍了关于uniapp中renderjs使用与传值问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
本篇文章给大家分享了关于JS的函数调用栈stack size的计算方法的相关知识点，有兴趣的朋友参考学习下。2018-06-06
这篇文章主要介绍了webpack4.x下babel的安装、配置及使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
Javascript 判断 object 的特定类转载...2007-02-02
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事！
写这篇文章的目的是经常看到开发人员说：把字符串转化为JSON对象，把JSON对象转化成字符串等类似的话题，所以把之前收藏的一篇老外的文章整理翻译了一下，供大家讨论，如有错误，请大家指出，多谢2012-01-01
可是这会引起再因网络原因或其他原因使图片不能正常加载的话 这样就是再次调用onerror，基于微软的一套核心的浏览器就会认为这是死循环2009-08-08
这篇文章主要介绍了Javascript原型链的原理,结合实例形式深入分析了JavaScript原型链的原理与使用技巧,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了微信小程序实现下滑到底部自动翻页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
闭包是一个拥有许多变量和绑定了这些变量的环境表达式（通常是一个函数），因而这些变量也是环境表达式的一部分。2010-12-12
最新评论