使用: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. hdu 6096---String（AC自动机）

    题目链接 Problem Description Bob has a dictionary with N words in it.Now there is a list of words in whi ...

  2. 在JS事件封装时，addEventListener()方法的this问题

    最近在写js的类库,模仿的是jquery的编程风格,当封装到事件监听的时候发现遇到了一个问题,代码是这样的: 上面是封装的一个事件委托的代码,我以为上面的封装跟普通的事件监听一样简单,结果我在调用时发 ...

  3. Ubuntu部署可视化爬虫Portia2.0环境

    部署portia环境官方文档给出的方法太过简单,对于初学者来说是很难根据那一两行字成功部署portia环境的.对于部署portia这只可爱的爬虫的过程还是有很多坑的,主要写一篇portia2.0版本的 ...

  4. java基础解析系列(五)---HashMap并发下的问题以及HashTable和CurrentHashMap的区别

    java基础解析系列(五)---HashMap并发下的问题以及HashTable和CurrentHashMap的区别 目录 java基础解析系列(一)---String.StringBuffer.St ...

  5. chrome开发工具指南（十）

    检查和删除 Cookie 从 Application 面板检查和删除 Cookie. TL;DR 查看与 Cookie 有关的详细信息,例如名称.值.网域和大小,等等. 删除单个 Cookie.选定网 ...

  6. 寻找Harris、Shi-Tomasi和亚像素角点

    Harris.Shi-Tomasi和亚像素角点都是角点,隶属于特征点这个大类(特征点可以分为边缘.角点.斑点). 一.Harris角点检测是一种直接基于灰度图像的角点提取算法,稳定性较高,但是也可能出 ...

  7. alert执行顺序

    <p><span id="span1">Hello World!</span></p> <script type=" ...

  8. 【beta】阶段 第七次 Scrum Meeting

    每日任务 1.本次会议为第七次 Meeting会议: 2.本次会议在下午14:45,课间休息时间在陆大楼召开,召开本次会议为10分钟. 一.今日站立式会议照片 二.每个人的工作 (有work item ...

  9. 201521123070 《JAVA程序设计》第8周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.泛型简介:泛型程序设计,编写的代码可被不同类型的对象所重用,Java中一个集合可以放任何类 型的对象,因为 ...

  10. 201521123057 《Java程序设计》 第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1.clone方法 1.1 Object对 ...