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

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

先看效果

代码如下

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。