使用: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. Struts2使用小问题-NoSuchFieldException

    五月 12, 2017 4:55:14 下午 com.opensymphony.xwork2.util.logging.jdk.JdkLogger warn 警告: couldn't clear to ...

  2. 安装Hadoop 2.7.3的过程中遇到的一些问题及解决方法。

    1. 启动hadoop 时发现namenode 没有启动起来 出现以下错误: Incorrect configuration: namenode address dfs.namenode.servic ...

  3. STL中set的用法

    set,顾名思义,就是数学上的集合——每个元素最多只出现一次,并且set中的元素已经从小到大排好序. 头文件:#include<set> 常用的函数: begin()     返回set容 ...

  4. 手把手封装数据层之DButil数据库连接的封装

    最近这段时间一直在用SSM框架做增删改查,突然想把以前还不会用框架的时候,综合百度和各种资料结合API文档抄袭而来的数据层的封装分享给大家.这边先封装一个DButil. 我这个封装就是烂大街的那种,没 ...

  5. 搭建互联网DNS构架

    author:JevonWei 版权声明:原创作品 构建"." DNS."com" DNS及"danran.com",用户通过"电 ...

  6. Windows上安装nvm--nodejs版本管理器

    nvm最新的下载地址 Node版本管理器--nvm,可以运行在多种操作系统上.nvm for windows 是使用go语言编写的软件. 我电脑使用的是Windows操作系统,所以我要记录下在此操作系 ...

  7. tomcat 和 jboss access log 日志输出详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt179 工作中nginx+jboss/tomcat反向代理集成,想打开后端jb ...

  8. 集美大学网络1413第十次作业成绩（团队六） -- 展示博客（Alpha版本）

    题目 团队作业6--展示博客(Alpha版本) 团队作业6成绩  团队/分值 简介& 项目地址 项目目标 (典型用户. 功能描述. 预期用户数量) 如何满足 用户需求 已完成目标 团队分工 团 ...

  9. 【1414软工助教】团队作业10——复审与事后分析（Beta版本） 得分榜

    题目 团队作业10--复审与事后分析(Beta版本) 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2:单元测试 团队作业1:团队展示 团队作业2:需求分析& ...

  10. 【Alpha阶段】第四次 Scrum Meeting

    每日任务 1.本次会议为第 四次 Meeting会议: 2.本次会议在上午09:35,大课间休息时间在禹州楼召开,召开本次会议为20分钟,分析完善接下来的任务: 一.今日站立式会议照片 二.每个人的工 ...