这篇文章主要介绍了原生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="/UploadFiles/2021-04-02/">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
最新资源
- 【中国民乐】张维良《秋江夜泊》2004[FLAC+CUE]
- 明达年度发烧碟MasterSuperiorAudiophile2011[D
- 明达年度发烧碟MasterSuperiorAudiophile2017[D
- 翁立友.2008-恨孤单【大旗】【WAV+CUE】
- 群星.2009-Magic.Cover日粤精华3CD【环球】【WA
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][5
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量