原生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中的float运算精度实例分析
Aug 21 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 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
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
php支付宝APP支付功能
2020/07/29 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Django Highcharts制作图表
2016/08/27 Python
Python正则表达式知识汇总
2017/09/22 Python
python Pygame的具体使用讲解
2017/11/03 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
中专毕业生自我鉴定
2013/11/21 职场文书
高一家长会邀请函
2014/01/12 职场文书
个人考核材料
2014/05/15 职场文书
大学生党员承诺书
2014/05/20 职场文书
森林防火标语
2014/06/23 职场文书
追悼会悼词大全
2015/06/23 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android