html2canvas实现页面截图效果--688IT编程网

html2canvas实现页⾯截图效果

昨天打开pc端的知乎，⽆意中发现右下⾓有⼀个很有意思的功能，意见反馈。当我们点击这个按钮的时候，就会弹出⼀个弹出层，让我们反映问题。下⾯有⼀个全页⾯的缩

率图：

我是第⼀次看到这种效果，到底他这个缩率图怎么实现的呢？通过万能的百度，我了解到了⼀个叫 html2canvas 实现的。⼜是html5，好吧，我不得不承认你太强⼤了。

我们把这个下载下来之后，放到 core ⽂件夹之内。先给⼤家看⼀下我的⽬录结构吧：

core存放 html2canvas，static放 js，css等资源，index.html 就是我们展⽰的页⾯。

html2canvas 就是将Dom节点在Canvas⾥边画出来。他的⽅法也很简单，本⽂只⽤到了⼀个⽅法html2canvas。它接收两个参数第⼀个是要画的元素，第⼆个是回调函数。

下⾯我们准备⼀个页⾯：

<!DOCTYPE html>

<html>

<head>

<title>H+ 后台主题UI框架 - 主页⽰例</title>

<style>

#xlt canvas{max-width:100%}

</style>

</head>

</button>

</div>

<blockquote class="text-warning" >您是否需要⾃⼰做⼀款后台、会员中⼼等等的，但是⼜缺乏html等前端知识…

<br>您是否⼀直在苦苦寻⼀款适合⾃⼰的后台主题…

<br>您是否想做⼀款⾃⼰的web应⽤程序…

<br>…………

</blockquote>

<hr>

</div>

<h2>Hello,Guest</h2>

<small>移动设备访问请扫描以下⼆维码：</small>

<br>

<br>

</div>

<h2>

H+ 后台主题UI框架

</h2>

<p>H+是⼀个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采⽤了主流的左右两栏

式布局，使⽤了Html5+CSS3等现代技术，她提供了诸多的强⼤的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.4)，当然，也集 <p>

<b>当前版本：</b>v4.1.0

</p>

<p>

</p>

<br>

<p>

<i class="fa fa-qq"> </i> 联系我

</a>

<i class="fa fa-home"></i> 访问博客

</a>

</p>

</div>

<h4>H+具有以下特点：</h4>

<ol>

<li>完全响应式布局（⽀持电脑、平板、⼿机等所有主流设备）</li>

<li>基于最新版本的Bootstrap 3.3.6</li>

<li>提供3套不同风格的⽪肤</li>

<li>⽀持多种布局⽅式</li>

<li>使⽤最流⾏的的扁平化设计</li>

<li>提供了诸多的UI组件</li>

<li>集成多款国内优秀插件，诚意奉献</li>

<li>提供盒型、全宽、响应式视图模式</li>

<li>拥有良好的代码结构</li>

</ol>

</div>

</div>

<p>我们提供基于H+的⼆次开发服务，具体费⽤请联系作者。</p>

<p>同时，我们也提供以下服务：</p>

<ol>

<li>基于WordPress的⽹站建设和主题定制</li>

<li>PSD转WordPress主题</li>

<li>PSD转XHTML</li>

<li>Html页⾯（CSS+XHTML+jQuery）制作</li>

</ol>

</div>

</div>

</p>

<p><i class="fa fa-weixin"></i> ：<a href="javascript:;">zheng-zihan</a>

</p>

<p><i class="fa fa-credit-card"></i> ⽀付宝：<a href="javascript:;" class="⽀付宝信息">zheng-zihan@qq / *⼦涵</a>

</p>

</div>

</div>

</h5>

</div>

<div class="alert alert-warning">此版本是⼀个维护版本，主要是升级和修复bug，让我们共同期待5.0版的到来</div>

<ol>

<li>修复页⾯链接和表单提交默认在新窗⼝中打开的问题</li>

<li>更新suggest插件，修复错位问题</li>

<li>升级bootstrap版本到3.3.6版本</li>

<li>升级layer到2.1版本</li>

<li>升级echarts到2.2.7版本</li>

<li>升级webuploader到0.1.5版本</li>

<li>修复⽹络条件不好情况下，页⾯加载提⽰遮挡页⾯⽆法操作的问题</li>

</ol>

</div>

</h5>

</div>

<ol>

<li>升级bootstrap到最新版本3.3.5；</li>

<li>升级jquery版本到最新版本2.1.4；</li>

<li>升级Font Awesome到最新版本4.4.0；</li>

<li>修复了登录页⾯的⼀处错误；</li>

<li>修复了主页⾯出现多个滚动条的问题；</li>

<li>修复了已知的各种浏览器兼容问题；</li>

<li>修复了layphoto和suggest等页⾯的显⽰问题；</li>

<li>新增Glyphicons字体图标的预览；</li>

<li>新增对不⽀持的浏览器的友好提⽰；</li>

<li>新增视频/⾳乐播放器的⽀持；</li>

<li>新增Bootstrap Table(推荐)；</li>

<li>进⼀步完善了开发⽂档；</li>

<li>提供了离线⽀持，开箱即⽤；</li>

<li>对IE系列的浏览器⽀持更好。</li>

</ol>

</div>

</h5>

</div>

<ol>

<li>修复360浏览器个别情况下崩溃的问题；</li>

<li>优化360浏览器的显⽰效果；</li>

<li>修复layim弹出聊天窗⼝出错的问题；</li>

<li>优化登录、注册、锁屏页⾯，使其在右侧主体区域打开时转到新页⾯打开；</li>

<li>优化了移动设备的展⽰效果。</li>

</ol>

</div>

</h5>

</div>

<ol>

<li>修复登录页⾯⽂本框输⼊字符不可见的问题；</li>

<li>修复⽕狐下conTabs关闭操作按钮不下拉的问题；</li>

<li>修复IOS系统下各种浏览器右侧内容不滚动的问题；</li>

<li>优化了主页⽰例三的显⽰；</li>

<li>修复了jqgrid编辑弹框导致页⾯错位的问题；</li>

<li>使百度Echarts图标⽀持响应式，并优化了其显⽰；</li>

<li>修复Summernote⽂本编辑器下拉菜单显⽰不全的问题；</li>

<li>修复Toastr通知图标显⽰多个的问题。</li>

</ol>

</div>

</h5>

</div>

<p>⾃H+ v3.0版发布后，⼜陆续发布了7个⼩版本，修复了⼀些兼容性问题，但是没有对外发布，更新⽇志略过……</p>

</div>

</h5>

</div>

<ol>

<li>今天是情⼈节，H+终于跨到了v3.0，就是是情⼈节礼物吧，感谢你们的不离不弃，⼀路相伴！ <a href="#" class="viewlog"><i class="fa fa-eye"></i> 查看升级⽇志</a>

</li>

<li><span class="text-danger">注意：</span>本次更新调整较⼤，不建议直接覆盖升级！</li>

</ol>

</div>

</h5>

</div>

<ol>

<li>根据⽤户的反馈，根据⽤户的反馈，移除了CDN⽀持，CDN服务将于2015年6⽉30⽇之后结束⽀持，如果您正在使⽤CDN服务，请尽快完成迁移，对于给您造成的不便，我们表⽰⾮常抱歉；

</li>

<li>升级Bootstrap到最新版本v3.3.4；

</li>

<li>修改了style.css，修复了其中的⼀些bug；

</li>

</ol>

</div>

</h5>

</div>

<ol>

<li>增加cdn服务⽀持，cdn节点使⽤阿⾥云服务，可保证您的项⽬随时使⽤最新版本的H+，免去反复升级的⿇烦；

</li>

</ol>

</div>

</h5>

</div>

<ol>

<li>增加RTL布局及RTL⽀持，可点击右上⾓齿轮按钮选择RTL模式查看；

</li>

<li>增加上下布局； <a href="index_4.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

<li>在360浏览器6.0以上版本中强制以webkit内核解析，体验更佳；

</li>

<li>增加<a href="toastr_notifications.html">Toastr通知</a>、<a href="nestable_list.html">嵌套列表</a>、<a href="timeline_v2.html">时间轴</a>、<a href="forum_main.html">论坛</a>、<a href="code_editor.ht </li>

<li>升级<a href="icons.html">Font Awesome</a>，<a href="form_simditor.html">Simditor</a>等到最新版本；

</li>

<li>优化部分内容

</li>

</ol>

</div>

</h5>

</div>

<ol>

<li>修复⼀些错误；

</li>

<li>修复了WebUploader中的⼀些问题； <a href="form_webuploader.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

</ol>

</div>

</h5>

</div>

<ol>

<li>更新jquery版本到官⽅最新版v2.1.1；

</li>

<li>更新Bootstrap版本到官⽅最新版v3.3.0；

</li>

<li>增加jqGrid组件； <a href="table_jqgrid.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

jquery弹出div窗口

<li>修复Summernote编辑器中的⼀个严重错误； <a href="form_editors.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

<li>修改了⼀些已知的bug，并修复了演⽰⽰例中的⼀些错误；

</li>

</ol>

</div>

</h5>

</div>

<ol>

<li>优化资源⽂件路径，删除多余⽂件

</li>

<li>增加Markdown编辑器 <a href="form_markdown.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

<li>增加拾⾊器ColorPicker <a href="form_advanced.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

<li>优化部分页⾯代码

</li>

</ol>

</div>

</h4>

</div>

<ol>

<li>增加了Bootstrap3表单构建器，表单设计更轻松； <a href="form_builder.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

<li>修改了webim的⾼度；

</li>

<li>修复了因缺少jquery.min.map⽂件⽽导致页⾯加载进度条速度过慢的问题；

</li>

</ol>

</div>

</h4>

</div>

<ol>

<li>修复了百度ECharts图表显⽰不正确的问题； <a href="graph_echarts.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

<li>新增表单验证⽰例，使⽤jQuery Validate插件实现； <a href="form_validate.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

<li>新增树形视图⽰例； <a href="tree_view.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

<li>修复弹框遮罩的Bug；

</li>

</ol>

</div>

</h4>

</div>

<ol>

<li>加⼊阿⾥巴巴团队的字体图标库，字体图标可以⾃定义啦； <a href="iconfont.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

<li>新增头像裁剪上传组件FullAvatareditor； <a href="form_avatar.html" title="去看看"><i class="fa f

a-eye"></i></a>

</li>

<li>集成⽹页弹层插件layer； <a href="layer.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

<li>集成⽇期选择器layerDate； <a href="layerdate.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

<li class="text-danger"><b>增加web即时通讯功能，可以在系统内了；</b> <a href="webim.html" title="去看看"><i class="fa fa-eye"></i></a> </li>

<li>增加主题预览功能，点击右上侧齿轮图标预览；</li>

<li>增加左侧边栏固定功能；</li>

<li>修复了多处问题。</li>

</ol>

</div>

</h4>

</div>

<ol>

<li>新增百度WebUploader拖动上传⽂件组件；<a href="form_webuploader.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

<li>新增国产优秀富⽂本编辑器插件Simditor；<a href="form_simditor.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

<li>新增百度ECharts统计图表插件；<a href="form_simditor.html" title="去看看"><i class="fa fa-eye"></i></a>

</li>

</ol>

</div>

</h4>

</div>

<ol>

</ol>

</div>

</h4>

</div>

<ol>

<li>Hplus正式发布。</li>

</ol>

</div>

</div>

<p>购买后我可以获得什么？</p>

<ol>

<li>所有源码(未压缩、带注释版本)；</li>

<li>终⾝免费升级服务；</li>

<li>必要的技术⽀持；</li>

<li>付费⼆次开发服务；</li>

</ol>

<hr>

<p>如果需要购买H+主题，可直接付款到⽀付宝：<a href="javascript;">zheng-zihan@qq</a>，收款⼈：<a href="javascript;">*⼦涵</a>。也可以使⽤⼿机⽀付宝或者扫码⽀付：</p> <div class="alert alert-warning">

付款完成后请及时联系作者，或在付款备注中留下邮箱或QQ，⽅便作者及时联系您。

<br>如果图⽚太⼩，可以点击图⽚放⼤。

</div>

</a>

</p>

</div>

</div>

</div>

</body>

</html>

下⾯我们加⼊ js 就可以实现这个了：

$("#yjfk").click(function(){

html2canvas(document.body).then(function(canvas) {

$("#xlt").html(canvas);

});

//页⾯层

layer.open({

title:'意见反馈',

type: 1,

skin: 'layui-layer-rim', //加上边框

area: ['500px', '700px'], //宽⾼

content: $("#msgBox")

});

})

</script>

简单的讲解⼀下：document.body是我要画的DOM元素，即将整个body都画下来。回调函数中，我们将这个canvas渲染到我们需要的展⽰的元素中就⾏。

688IT编程网

html2canvas实现页面截图效果

发表评论

推荐文章

随机森林算法介绍及R语言实现

基于随机森林优化的神经网络算法在冬小麦产量预测中的应用研究_百度文 ...

基于正则化贪心森林算法的情感分析方法研究

随机森林算法和grandientboosting算法

基于随机森林的图像分类算法研究

热门文章

随机森林算法的改进方法

基于随机森林算法的风险预警模型研究

Python中的随机森林算法详解

随机森林发展历史

如何使用随机森林进行时间序列数据模式识别(八)

随机森林回归模型原理

如何使用随机森林进行时间序列数据模式识别(六)

如何使用随机森林进行时间序列数据预测(四)

如何使用随机森林进行异常检测(六)

随机森林算法和grandientboosting算法 -回复

随机森林方法总结全面

随机森林算法原理和步骤

随机森林的原理

随机森林重要性

随机森林算法

机器学习中随机森林的原理

随机森林算法原理

使用计算机视觉技术进行动物识别的技巧

基于crf命名实体识别实验总结

transformer预测模型训练方法

最新文章

随机森林算法介绍及R语言实现

基于随机森林优化的神经网络算法在冬小麦产量预测中的应用研究_百度文 ...

基于正则化贪心森林算法的情感分析方法研究

随机森林算法和grandientboosting算法

基于随机森林的图像分类算法研究

随机森林结合直接正交信号校正的模型传递方法

标签列表

688IT编程网

html2canvas实现页面截图效果

发表评论

推荐文章

随机森林算法介绍及R语言实现

基于随机森林优化的神经网络算法在冬小麦产量预测中的应用研究_百度文 ...

基于正则化贪心森林算法的情感分析方法研究

随机森林算法和grandientboosting算法

基于随机森林的图像分类算法研究

热门文章

随机森林算法的改进方法

基于随机森林算法的风险预警模型研究

Python中的随机森林算法详解

随机森林发展历史

如何使用随机森林进行时间序列数据模式识别(八)

随机森林回归模型原理

如何使用随机森林进行时间序列数据模式识别(六)

如何使用随机森林进行时间序列数据预测(四)

如何使用随机森林进行异常检测(六)

随机森林算法和grandientboosting算法 -回复

随机森林方法总结全面

随机森林算法原理和步骤

随机森林的原理

随机森林 重要性

随机森林算法

机器学习中随机森林的原理

随机森林算法原理

使用计算机视觉技术进行动物识别的技巧

基于crf命名实体识别实验总结

transformer预测模型训练方法

最新文章

随机森林算法介绍及R语言实现

基于随机森林优化的神经网络算法在冬小麦产量预测中的应用研究_百度文 ...

基于正则化贪心森林算法的情感分析方法研究

随机森林算法和grandientboosting算法

基于随机森林的图像分类算法研究

随机森林结合直接正交信号校正的模型传递方法

标签列表

随机森林重要性