使用: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. 新手学习SEO要做的七件事是什么？

    学习SEO可能不那么先进的编程,学习SEO不可能掌握网页设计,学习SEO不需要学习SEO DIV + CSS;不是一个困难的任务,但是在学习过程中,如果你想掌握SEO,那么我们要做的几件事. 1.学习 ...

  2. opencv VideoCapture使用示例

    在centos7下验证VideoCapture功能. 1 opencv处理视频时要使用ffmpeg,这里使用添加源的方式安装,分为3步 1.1 先安装EPEL Release,使用其他的repo源,所 ...

  3. 【前端】react学习阶段总结，学习react、react-router与redux的这些事儿

    前言 借用阮一峰的一句话:真正学会 React 是一个漫长的过程. 这句话在我接触react深入以后,更有感触了.整个react体系都是全新的,最初做简单的应用,仅仅使用react-tools打包js ...

  4. 共享Visio和project的下载链接

    好东西就应该共享  下面的是最新版的Visio和project的百度云链接 Visio的链接:http://pan.baidu.com/s/1o8UJq4M 密码:sltu project的链接:ht ...

  5. 我的前端故事----我为什么用GraphQL

    背景 今年我在做一个有关商户的app,这是一个包含商户从入网到审核.从驳回提交到入网维护的完整的生命周期线下推广人员使用的客户端软件,但故事并没有这么简单... 疑问 随着app的逐渐完善,遇到的问题 ...

  6. openssl命令

    author:JevonWei 版权声明:原创作品 1.构建根证书 构建根证书前,需要构建随机数文件(.rand),完整命令如 openssl rand -out private/.rand 1000 ...

  7. Spring 事务管理笔记

    本文为 Spring 框架的事务管理学习笔记,官网文档地址为:Transaction Management,隔离级别及传播属性解释来自 org.springframework.transaction. ...

  8. 定时调度框架：Quartz.net

    Quartz.net相关概念 经常出现场景:定时轮询数据库同步,定时邮件通知,定时处理数据等 Scheduler (计划者或调度器) Job (工作对象):将要定时执行的任务代码写到实现Ijob接口的 ...

  9. poj 3013 SPFA

    首先看题看的很懵.. 然后这题直接没想用Djstra做 TLE了.看discuss,Dijstra要用堆优化,也可以用SPFA做. 这里在网上找了这两种做法的区别,点多稠密图用Dij,以为它是操作点的 ...

  10. 转：【Java集合源码剖析】Vector源码剖析

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/35793865   Vector简介 Vector也是基于数组实现的,是一个动态数组,其容量 ...