网站建设资讯

NEWS

网站建设资讯

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

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

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

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

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


分享标题:怎么在JavaScript中使用canvas实现一个前端截图工具-创新互联
URL地址:http://cdweb.net/article/ghese.html

其他资讯