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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
three.js 如何制作魔方
Jul 31 Javascript
JavaScript实现原型封装轮播图
Dec 27 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
我的论坛源代码(五)
2006/10/09 PHP
如何使用PHP往windows中添加用户
2006/12/06 PHP
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
各种快递查询--Api接口
2016/04/26 PHP
JS查看对象功能代码
2008/04/25 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python生成随机密码或随机字符串的方法
2015/07/03 Python
使用Python读取大文件的方法
2018/02/11 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
django框架cookie和session用法实例详解
2019/12/10 Python
大三毕业自我鉴定
2014/01/15 职场文书
生物制药自我鉴定
2014/01/25 职场文书
心得体会的写法
2014/09/05 职场文书
布达拉宫导游词
2015/02/02 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
python cv2图像质量压缩的算法示例
2021/06/04 Python
MySQL索引失效场景及解决方案
2022/07/23 MySQL