怎么在JavaScript中使用canvas实现一个前端截图工具-创新互联

这期内容当中小编将会给大家带来有关怎么在JavaScript中使用canvas实现一个前端截图工具，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

站在用户的角度思考问题，与客户深入沟通，找到阿坝州网站设计与阿坝州网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名申请、网站空间、企业邮箱。业务覆盖阿坝州地区。

JavaScript是什么

JavaScript是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，JavaScript是被广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。

代码如下

<!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中使用canvas实现一个前端截图工具了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章题目：怎么在JavaScript中使用canvas实现一个前端截图工具-创新互联
链接分享：https://www.cdcxhl.com/article34/ghese.html

成都网站建设公司_创新互联，为您提供网站制作、品牌网站设计、网站导航、网站改版、ChatGPT、软件开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容