<html>
<head>
    <meta name="layout" content="main">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="https://lib.baomitu.com/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://lib.baomitu.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

    <script  type="text/javascript" >
        $(document).ready( function(){
            $(".example1").on("click", function(event) {
                event.preventDefault();
                html2canvas(document.body, {
                    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;
                        document.body.appendChild(newImg);
                    }
                });
            });

        });

    </script>
</head>
<body>

Hello!
<div class="" style="background-color: #abc;">
    计算机天堂测试html5页面截图
    <br>jsjtt.com
</div>

<textArea id="textArea" col="20" rows="10" ></textArea>
<input class="example1" type="button" value="button">
生成界面如下：
</body>
</html>

js截屏的更多相关文章

  1. 搭建前端监控系统（六）JS截屏和录屏篇

    怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后.错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决 ...

  2. html2canvaces用法，js截屏并且下载

    1.首先自己下载引入html2canvaces和jquery(我的demo路径是自己本地的) 2.点击截屏按钮后,跳出层的其他部分是取消保存,点击截取获得的图片区域,表示保存 <!DOCTYPE ...

  3. js 截屏保存图片

    html2canvas.js 这个js有个强大的功能,就是能将html 对应的dom生成canvas. 这样,我们就可以通过生成的canvas转化成 base64 图片,从而实现截屏功能: 核心代码如 ...

  4. vue中使用html2canvas及解决html2canvas截屏图片模糊问题

    最近在项目中用到了html2canvas插件,遇到的一些坑写下来,与大家共勉. html2canvas  官方网站http://html2canvas.hertzen.com/index.html 这 ...

  5. 使用 JavaScript 截屏

    经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能 ...

  6. js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现，兼容火狐，谷歌；canvas截屏跨域问题，无音频视频流加载不显示问题

    项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...

  7. php结合phantomjs实现网页截屏、抓取js渲染的页面

    首先PhantomJS快速入门 PhantomJS是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, ...

  8. JS实现网页选取截屏 保存+打印 功能(转)

    源码地址: 1.1 确定截图选取范围 用户在开始截图后,需要在页面上选取一个截图范围,并且可以直观的看到,类似如下效果: image 我们的选取范围就是鼠标开始按下的那个点到鼠标拖动然后松开的那个点之 ...

  9. js利用clipboardData在网页中实现截屏粘贴的功能

    目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴,不过火狐和ie11浏览器在可编辑的div中能够粘贴截图的图片也是base64位和Chrome利用clipboard ...

随机推荐

  1. CF960G Bandit Blues（第一类斯特林数）

    传送门 可以去看看litble巨巨关于第一类斯特林数的总结 设\(f(i,j)\)为\(i\)个数的排列中有\(j\)个数是前缀最大数的方案数,枚举最小的数的位置,则有递推式\(f(i,j)=f(i- ...

  2. VS2015 : error LNK1168

    VC在重新生成Debug目录下的exe文件时,需要先删除原先的exe文件.但因为文件正在运行或是被锁定等原因,删除不了,于是出现 LNK1168错误.可以到任务管理器先将exe文件关闭,一个简单粗暴的 ...

  3. JMeter博客系列：JMeter BeanShell示例

    1.简介 Apache JMeter是一个基于Java的开源工具,使您可以在应用程序上执行功能,负载,性能和回归测试.应用程序可以在Web服务器上运行,也可以是独立的.它支持在包含静态和动态资源的客户 ...

  4. HDU-1003：Max Sum（优化）

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  5. foreach循环与迭代器循环 删除插入元素的区别

     (1)仅对其遍历而不修改容器大小时,只使用foreach循环 (2)需要边遍历边修改容器大小时(插入删除元素),只使用迭代器循环 import java.util.HashMap;import ja ...

  6. python入门之前面内容拾遗

    int n1 = 123 #根据int类,创建了一个对象 n2 = int(123) #根据int类,创建了一个对象,这里实际上调用了int类里的内置函数__int__(x,2),其中x为定义的对象, ...

  7. 部署iis服务器与c#程序遇到的问题小结

    记得上次部署IIS服务器比较顺利,半天搞定的?有点忘了. 但,服务器版本各有不同,这次装的是server2008 R2 Ennterprice版.虽然忘了上次装的是哪个版本,但进去后发现有些东西明显不 ...

  8. HDU 3117 Fibonacci Numbers 数学

    http://acm.hdu.edu.cn/showproblem.php?pid=3117 fib是有一个数学公式的. 这里的是标准的fib公式 那么fib = 1 / sqrt(5) * ((1 ...

  9. webstock学习

    1.WebSocket是HTML5中出出现的新技术,有着web TCP之称,这也是为了适应现在实时传输数据的趋势,在这之前一般采用两种方法进行实时数据交换. 轮询机制,其中又包括长轮询. ①短轮询是指 ...

  10. Function ereg() is deprecated in

    PHP 5.3 ereg() 无法正常使用,提示"Function ereg() is deprecated Error".问题根源是php中有两种正则表示方法,一个是posix, ...