原生js基于canvas实现一个简单的前端截图工具代码实例


Posted in Javascript onSeptember 10, 2019

这篇文章主要介绍了原生js基于canvas实现一个简单的前端截图工具代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

先看效果

原生js基于canvas实现一个简单的前端截图工具代码实例

代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      *{
        padding: 0;
        margin: 0;
      }
      .clip-img-w{
        position: relative;
        width: 100%;
        height: 100%;
        font-size: 0;
      }
      .clip-img-w img{
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
      .clip-img-w canvas{
        position: absolute;
        left: 0;
        top: 0;
      }
      .clip-img-w #clipcanvas{
        z-index: 2;
      }
      .clip-img-w #drawcanvas{
        background: #fff;
        z-index: 1;
      }       
      #img{
        display: block;
        margin: 0 auto;
      }
      .box-c{
        width: 400px;
        height: 200px;
        border: 1px solid #F35252;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <div class="box-c">
      <div class="clip-img-w" id="clip-img-w">
        <canvas id="drawcanvas" ></canvas>
        <canvas id="clipcanvas" ></canvas>
      </div>
    </div>
     
    <!-- 结果 -->
    <img src="" id="img">
  </body>
  <script type="text/javascript">
    var img = document.getElementById("img");
    var url = 'http://img.muchengfeng.cn/FvC7i-GkXYoHE7kGFlNfj7xEzvIQ';
     
    var wrap = document.getElementById("clip-img-w");
    var width = wrap.offsetWidth;
    var height = wrap.offsetHeight;
   
    var clipcanvas = document.getElementById("clipcanvas");
    var drawcanvas = document.getElementById("drawcanvas");
    clipcanvas.width = width;
    clipcanvas.height = height;
    drawcanvas.width = width;
    drawcanvas.height = height;
     
 
    var clipCtx = drawcanvas.getContext("2d");
    var clipImg = document.createElement("img");
    clipImg.crossOrigin = "anonymous";
    clipImg.src = url;
    var timg = clipImg.cloneNode();
    wrap.appendChild(clipImg);
    clipImg.onload = function(){
      var x = Math.floor((width - this.width)/2);
      var y = Math.floor((height - this.height)/2);
      clipCtx.drawImage(this,0,0,timg.width,timg.height,x,y,this.width,this.height);
    }
     
     
    var ctx = clipcanvas.getContext("2d");
    ctx.fillStyle = 'rgba(0,0,0,0.6)';
    ctx.strokeStyle="green";
    var start = null;
    var clipArea = {};//裁剪范围
     
    clipcanvas.onmousedown = function(e){
      start = {
        x:e.offsetX,
        y:e.offsetY
      };
    }
    clipcanvas.onmousemove = function(e){
      if(start){
        fill(start.x,start.y,e.offsetX-start.x,e.offsetY-start.y)
      }
    }
    document.addEventListener("mouseup",function(){
      if(start){
        start = null;
        var url = startClip(clipArea);
        img.src= url;
      }
    })     
    function fill(x,y,w,h){
      ctx.clearRect(0,0,width,height);
      ctx.beginPath();
      //遮罩层
      ctx.globalCompositeOperation = "source-over";
      ctx.fillRect(0,0,width,height);
      //画框
      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillRect(x,y,w,h);
      //描边
      ctx.globalCompositeOperation = "source-over";
      ctx.moveTo(x,y);
      ctx.lineTo(x+w,y);
      ctx.lineTo(x+w,y+h);
      ctx.lineTo(x,y+h);
      ctx.lineTo(x,y);
      ctx.stroke();
      ctx.closePath();
      clipArea = {
        x,
        y,
        w,
        h
      };
    }
    function startClip(area){
      var canvas = document.createElement("canvas");
      canvas.width = area.w;
      canvas.height = area.h;
       
      var data = clipCtx.getImageData(area.x,area.y,area.w,area.h);
       
      var context = canvas.getContext("2d");
      context.putImageData(data,0,0);
      return canvas.toDataURL("image/png");
    }       
  </script>
</html>

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

Javascript 相关文章推荐
javascript中的几个运算符
Jun 29 Javascript
Div自动滚动到末尾的代码
Oct 26 Javascript
关于javascript中的parseInt使用技巧
Sep 03 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 #Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 #Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 #Javascript
npm 语义版本控制详解
Sep 10 #Javascript
解决layui的input独占一行的问题
Sep 10 #Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 #Javascript
防止Layui form表单重复提交的实现方法
Sep 10 #Javascript
You might like
PR值查询 | PageRank 查询
2006/12/20 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
js 3种归并操作的实例代码
2013/10/30 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
学习python (1)
2006/10/31 Python
python中将字典转换成其json字符串
2014/07/16 Python
Python实现去除代码前行号的方法
2015/03/10 Python
Python中的ConfigParser模块使用详解
2015/05/04 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle