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 相关文章推荐
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
php与js的区别是什么
Aug 05 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 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获取随机数组列表的方法
2014/11/13 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
Python算法之图的遍历
2017/11/16 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
python版百度语音识别功能
2019/07/09 Python
django2笔记之路由path语法的实现
2019/07/17 Python
学生个人自我鉴定范文
2014/03/28 职场文书
保护环境倡议书300字
2014/05/19 职场文书
服务整改报告
2014/11/06 职场文书
财务工作个人总结
2015/02/27 职场文书
考勤制度通知
2015/04/25 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
大学团日活动总结书
2015/05/11 职场文书
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS