使用:html2canvas实现浏览器截图

<html>

    <head>

        <meta name="layout" content="main">

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>

        <script type="text/javascript">

            $(document).ready(function() {

                $(".example1").on("click", function(event) {

                    event.preventDefault();

                    html2canvas($(".aa"), {

                     // height: $(".aa").outerHeight() + 20,

                        allowTaint: true,

                        taintTest: false,

                        onrendered: function(canvas) {

                            canvas.id = "mycanvas";

                            //document.body.appendChild(canvas);

                            //生成base64图片数据

                            var dataUrl = canvas.toDataURL();

                            var newImg = document.createElement("img");

                            newImg.src = dataUrl;

                            newImg.className = 'img'

                            $(".product").before(newImg);

                        }

                    });

                });

            });

        </script>

    </head>

    <body>

        Hello!

        <div class="aa" style="background-color: #abc;">

            test test test test test test

        </div>

        <textArea id="textArea" col="20" rows="10"></textArea>

        生成界面如下：

        <div class="product">

            <input class="example1" type="button" value="button">

        </div>

    </body>

</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. geotrellis使用（三十一）使用geotrellis直接将GeoTiff发布为TMS服务

    前言 传统上我们需要先将Tiff中存储的影像等数据先切割成瓦片,而后再对外提供服务.这样的好处是服务器响应快,典型的用空间来换时间的操作.然而这样造成的问题是空间的巨大浪费,一般情况下均需要存储1-1 ...

  2. SoapUI中读取法文字符

    最近测试中,使用SoapUI时需要读取excel中的法文数据作为参数,groovy script中使用的是jxl进行excel的读取, 开始时一直显示乱码,而后在script中添加如下wookbook ...

  3. Docker 集群环境实现的新方式

    近几年来,Docker 作为一个开源的应用容器引擎,深受广大开发者的欢迎.随着 Docker 生态圈的不断建设,应用领域越来越广.云计算,大数据,移动技术的快速发展,加之企业业务需求的不断变化,紧随技 ...

  4. EL表达式的js函数传参问题

    <!Doctype html> <html> <head> <title>js的传参问题</title> <script type=& ...

  5. 低版本浏览器支持HTML5标签的方法

    最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...

  6. basepath的作用 (转)

    转自:http://blog.csdn.net/randomnet/article/details/8630754   在谈basePath之前,先来讨论一下相对路径与绝对路径的区别.    相对路径 ...

  7. ubuntu16.04下源码安装onos1.0.2

    由于工作需要,下载安装onos1.0.2的版本,大家看需求可以下载安装更高级的版本 参考链接:http://www.sdnlab.com/14650.html 1.系统环境 Ubuntu16.04 L ...

  8. VMware bridge 桥接方式连接internet

    经过反复测试,关于VMware内虚拟机(包括ubuntu linux和windows)连接internet 目前的结论是 使用bridge方式时,VMware相当于一个交换机(switch),虚拟机和 ...

  9. 小程序脚本语言WXS详解

    WXS脚本语言是 Weixin Script脚本的简称,是JS.JSON.WXML.WXSS之后又一大小程序内部文件类型.截至到目前小程序已经提供了5种文件类型. 解构小程序的几种方式,其中一种方式就 ...

  10. [转载]Web前端和后端之区分，以及面临的挑战【转】

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...