发 送

使用HTML5 Canvas实现的界面元素截屏功能

iefreer 发表于 2016-11-04 21:00:32

标签: canvas, html5, screenshot, 截图

- +

如果网站出现问题，常常需要截图来提交反馈，这个功能很实用。使用HTML5的Canvas可以实现这个目标。

我们首先引入html2canvas.js，建立一个简单的页面：

blob.png

然后调用如下的代码，上述DIV中包含的内容将被截屏并添加到页面下面：

blob.png

在线演示地址：http://wow.techbrood.com/fiddle/30645

使用限制：

不能截取插件（Flash、Silverlight等）内容和iframe内容。

possitive(0) negative(0) views2370 comments0
私信 收藏 分享
分享到

发送私信

发送

最新评论

请先 登录 再评论.
相关文章

  • A-Frame WebVR（网页虚拟现实）快速开发入门教程

    WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实（VR）体验，但从工程化的角度而言，开发社区还需要更多方便强大的开发库来简化编程，Mozilla的

  • JavaScript语言多编程范式简介

    和C++等语言类似，JS支持多范式（paradigms）编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式：命令式、面向对象和函数式。命令式（Imperative JavaScript）命令式就是简单的从上而下完成任务，流水账过程式编码风格：function

  • 深入理解JS和CSS3动画性能问题和技术选择

    本文对比了JS及其框架和CSS3的动画性能，并深入剖析了其内在原因。技术结论大致如下：1. jQuery出于设计原因，在动画性能上表现最差2. CSS3由于把动画逻辑推给了...

  • 使用SVG和CSS3创建圆形进度条动画

    圆形进度条是一个经典的控制面板元素，常用于显示任务进度，比如用户档案的完整程度，或者升级状态。有很多方法来实现圆形进度条，比如用JS, CSS3, Canvas, SVG...

  • 计算WebGL中的uniforms变量使用数

    在使用Three.js为人体模型加载皮肤材料时，启用了skinning:true的参数。有时候会导致GL编译错误，提示“too many uniforms”。下面的文章有助于理解错误原因和检...

  • Three.js入门教程1 - 基础知识和创建一个红色球体

    [ TECHBROOD注：Three.js是一个主流的开源WebGL库，WebGL允许使用JavaScript直接操作GPU，在网页上实现3D效果。
    Google的工程师Paul在网站aerotwist.com上...

  • 使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解

    要实现标题全屏居中（同时在垂直和水平方向居中），有若干种方法，包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方...

  • HTML网页布局：静态、自适应、流式、响应式

    静态布局（Static Layout）即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；对于移动设备，单独设计一个布...

  • Three.js 3D打印数据模型文件（.STL）加载

    3D打印是当下和未来10年产品技术主流方向之一，影响深远。对于电子商务类的3D打印网站，一个主要功能是把商品以3D的方式呈现出来，也就是3D数据可视化技术。HTML...

  • 如何使用CSS3实现书页（书本）卷角效果

    我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果，以使其更为逼真。所谓的“卷角”实际上可以用小角度...

    • 更多...