canvas实现图像截取功能


Posted in Javascript onFebruary 06, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery textarea的长度进行验证
May 06 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
js图片处理示例代码
May 12 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
JS跨域请求外部服务器的资源
Feb 06 #Javascript
canvas实现动态小球重叠效果
Feb 06 #Javascript
canvas滤镜效果实现代码
Feb 06 #Javascript
canvas实现图像放大镜
Feb 06 #Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 #Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 #Javascript
jQuery快速实现商品数量加减的方法
Feb 06 #Javascript
You might like
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
深入了解php4(1)--回到未来
2006/10/09 PHP
Ajax PHP分页演示
2007/01/02 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
php explode函数实例代码
2012/02/27 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
简单谈谈python的反射机制
2016/06/28 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
python创造虚拟环境方法总结
2019/03/04 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
自荐信写法介绍
2014/01/25 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
内乡县衙导游词
2015/02/05 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
Python初识逻辑与if语句及用法大全
2021/08/07 Python
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js
python的html标准库
2022/04/29 Python
python通过新建环境安装tfx的问题
2022/05/20 Python