资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么在JavaScript中使用canvas实现一个前端截图工具

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

成都创新互联公司致力于互联网网站建设与网站营销,提供网站设计制作、成都网站制作、网站开发、seo优化、网站排名、互联网营销、成都小程序开发、公众号商城、等建站开发,成都创新互联公司网站建设策划专家,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。

JavaScript是什么

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

代码如下



  
    
    
    
      *{
        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;
      }
    
  
  
    
      
        
        
      
    
                          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");     }          

上述就是小编为大家分享的怎么在JavaScript中使用canvas实现一个前端截图工具了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


新闻标题:怎么在JavaScript中使用canvas实现一个前端截图工具
浏览路径:http://www.cdkjz.cn/article/pjidgg.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220