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 构造函数 面相对象学习必备知识
Jun 09 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
浅析java线程中断的办法
Jul 29 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
vue移动端模态框(可传参)的实现
Nov 20 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
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
PHP7新特性简述
2017/06/11 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python实现百度关键词排名查询
2014/03/30 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
现代化办公人员工作的自我评价
2013/10/16 职场文书
实习教师个人的自我评价
2013/11/08 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
安全承诺书
2015/01/19 职场文书
销售合作意向书范本
2015/05/08 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
诉讼和解协议书
2016/03/23 职场文书
python 实现的截屏工具
2021/05/08 Python