使用:html2canvas实现浏览器截图

  1. <html>
  2.     <head>
  3.         <meta name="layout" content="main">
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  6.         <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
  7.         <script type="text/javascript">
  8.             $(document).ready(function() {
  9.                 $(".example1").on("click", function(event) {
  10.                     event.preventDefault();
  11.                     html2canvas($(".aa"), {
  12.                      // height: $(".aa").outerHeight() + 20,
  13.                         allowTaint: true,
  14.                         taintTest: false,
  15.                         onrendered: function(canvas) {
  16.                             canvas.id = "mycanvas";
  17.                             //document.body.appendChild(canvas);
  18.                             //生成base64图片数据
  19.                             var dataUrl = canvas.toDataURL();
  20.                             var newImg = document.createElement("img");
  21.                             newImg.src = dataUrl;
  22.                             newImg.className = 'img'
  23.                             $(".product").before(newImg);
  24.                         }
  25.                     });
  26.                 });
  27.             });
  28.         </script>
  29.     </head>
  30.     <body>
  31.         Hello!
  32.         <div class="aa" style="background-color: #abc;">
  33.             test test test test test test
  34.         </div>
  35.         <textArea id="textArea" col="20" rows="10"></textArea>
  36.         生成界面如下：
  37.         <div class="product">
  38.             <input class="example1" type="button" value="button">
  39.         </div>
  40.     </body>
  41. </html>

参考：http://www.cnblogs.com/yanweidie/p/5203943.html#_label0

点击截图功能 js canvas的更多相关文章

  1. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  2. 通过jcrop和canvas的画布功能完成对图片的截图功能与视频的截图功能实现

    最近因为工作需要,做了视频截图和图截图的功能.大概需求是,用户点击某个按钮,可以对图片区域进行部分截取,然后进行进一步的业务操作. 首先说图片截图功能的思路, (1)下载Jcrop插件,添加css和j ...

  3. JS 使用html2canvas实现截图功能的问题记录和解决方案

    在实现“截图”功能时,遇到几个bug,研究了一个上午,终于全部解决了: 下面给大家分享下: 1."图片资源跨域",导致无法截图. 浏览器会提示下面的错误 DOMException: ...

  4. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  5. HTMLTESTRunner自动化测试报告增加截图功能

    我们都知道HTMLTESTRunner自动化测试报告,是Unittest单元测试框架报告,那么在做ui测试的时候就有点不适用了. 我们需要出错截图功能. 以下是我改的,增加了截图功能,先展示界面,再展 ...

  6. WPF C#截图功能 仿qq截图

    原文:WPF C#截图功能 仿qq截图 先上效果图 源码下载地址:http://download.csdn.net/detail/candyvoice/9788099 描述:启动程序,点击窗口butt ...

  7. Cesium截图功能

    首先安装  canvas2image npm intsall canvas2image --save 因为项目基于vue,所以需要在canvas2image的最后面 加上 export default ...

  8. 利用onekeyup即可实现验证码的点击刷新功能

    显示验证码 首先在Home/Controller下创建一个公共控制器PublicController 1 <php2 namespace Home\Controller;3 4 use Thin ...

  9. 基于java的后台截图功能的实现

    Java后台截图功能的实现 背景介绍: 在近期开发的可视化二期项目中的邮件项目中,邮件中的正文中含有图片.该图片的产生是将一些html网页转为图片格式,刚开始考虑使用第三方组件库html2image和 ...

随机推荐

  1. Java并发包中CopyOnWrite容器相关类简介

    简介: 本文是主要介绍,并发容器CopyOnWriteArrayList和CopyOnWriteArraySet(不含重复元素的并发容器)的基本原理和使用示例. 欢迎探讨,如有错误敬请指正 如需转载, ...

  2. Ultimate thread group线程组和Stepping thread group线程组测试场景

    Ultimate thread group线程组 当测试需求是要求进行波浪型的压力测试场景时,使用该线程组,例如:测试场景总共有10个线程,然后分为三个波段进行测试,每个波段负载策略设置为一样,如图:

  3. PyQt：昨天今天明天表示方法

    PyQt中今天的表示方法如下: QtCore.QDate.currentDate() 那么,明天怎么表示呢? today=QtCore.QDate.currentDate().toJulianDay( ...

  4. struts2-Action处理请求参数

    struts2 和 MVC 定义关系 StrutsPrepareAndExecuteFilter : 控制器 JSP : 视图 Action : 可以作为模型,也可以是控制器 struts2 Acti ...

  5. SoapUI进行接口测试，怎么应对接口地址总是变化！

    如果是没有代码能力的小白,要利用工具进行接口测试的时候,经常会遇到接口地址或者接口参数变化的问题,然后不得不在他们改了接口之后,就手动去改所有的请求链接地址和接口参数!1-5个请求,我们手动改还应付的 ...

  6. Java的常用操作符

    操作符用于接受一个或多个参数,并生成一个新的值.加号和一元的正号(+).减号和一元的负号(一).乘号(*).除号(/)以及赋值号(=)的用法和大多数编程语言都类似. 操作符作用于操作数,生成一个新值. ...

  7. 深入浅出数据结构C语言版（16）——插入排序

    从这一篇博文开始,我们将开始讨论排序算法.所谓排序算法,就是将给定数据根据关键字进行排序,最终实现数据依照关键字从小到大或从大到小的顺序存储.而这篇博文,就是要介绍一种简单的排序算法--插入排序(In ...

  8. Spring事务管理（一）

    对于Spring相信很多做web开发的小活动一定不陌生,Spring中我们经常谈到的就是IOC和AOP,但是对于Spring的事务管理,相信大家一定也很感兴趣,今天我们就探讨一下Spring中的事务管 ...

  9. linux系统下C语言调用lapack ,blas库

    在利用C语言编程,经常调用其他的软件包,其中lapack,blas库是最常用的两个库,这里讲下在linux系统下,C语言编程如何调用这两个库: 1.首先讲下blas库的调用,这里以两个向量内积函数为例 ...

  10. nrm的安装 、定义和用法

    因为npm包管理工具是属于国外的,所以在中国使用它下载东西的时候比较慢.这时我们就想用国内的淘宝镜像.也有别的,所以当你想切换下载源的时候就会用到nrm了. ###首先,nrm是什么呢? 开发的npm ...