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 相关文章推荐
javascript 得到文件后缀名的思路及实现
May 09 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 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
php 保留小数点
2009/04/21 PHP
php 常用类整理
2009/12/23 PHP
php的字符串用法小结
2010/06/08 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
Python中实现常量(Const)功能
2015/01/28 Python
python实现在windows下操作word的方法
2015/04/28 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
Servlet方面面试题
2016/09/28 面试题
慈善晚会策划方案
2014/05/14 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
护士辞职信怎么写
2015/02/27 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
会计主管竞聘书
2015/09/15 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python