html2canvaces用法，js截屏并且下载
1、首先自己下载引入html2canvaces和jquery（我的demo路径是自己本地的）
2、点击截屏按钮后，跳出层的其他部分是取消保存，点击截取获得的图片区域，表示保存
<!DOCTYPE >
<html>
<head>
<title>截图</title>
<meta name="" content="" charset="utf-8" />
<style type="text/css">
#box{
width: 400px;
height: 300px;
border: 4px solid yellowgreen;
color: deeppink;
text-align: center;
line-height: 300px;
font-size: 50px;
}
button{
width: 200px;
height: 50px;
font-size: 20px;
}
#imgContent{
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
background: rgba(0,0,0,0.4);
display: none;
}
</style>
</head>
<body> <div id="box">
截屏效果测试
</div> <button id="btn1">点击截图</button>
<div id="imgContent"></div> <!--用来装图片-->
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript">
$("#btn1").on("click",function(){
$("#imgContent").show(); /*装图片的盒子显示出来*/
$("#imgContent").css({"height":$("body").outerHeight()});/*装图片的盒子高度出来*/
html2canvas( $("#box") ,{ //box为要截屏的dom元素
onrendered: function(canvas){
var url = canvas.toDataURL(); /*获得的图片路径，base64*/
$("#imgContent").html(' <a href=""><img src="'+ url +'" /></a>'); /*避免事件重复绑定*/
$("#imgContent").off("click","img"); $("#imgContent").on("click","img",function (event) {
/*点击下载功能*/
$("#imgContent").find("a").attr( 'href' ,url) ;
$("#imgContent").find("a").attr( 'download' , 'caibao.png' ) ;
});
}
});
});
/*隐藏弹出层*/
$("#imgContent").on("click",function(){
$(this).hide();
});
</script>
</html>
html2canvaces用法，js截屏并且下载的更多相关文章
- 搭建前端监控系统（六）JS截屏和录屏篇
怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后.错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决 ...
- js 截屏保存图片
html2canvas.js 这个js有个强大的功能,就是能将html 对应的dom生成canvas. 这样,我们就可以通过生成的canvas转化成 base64 图片,从而实现截屏功能: 核心代码如 ...
- js截屏
<html><head> <meta name="layout" content="main"> <meta http ...
- vue中使用html2canvas及解决html2canvas截屏图片模糊问题
最近在项目中用到了html2canvas插件,遇到的一些坑写下来,与大家共勉. html2canvas 官方网站http://html2canvas.hertzen.com/index.html 这 ...
- 使用 JavaScript 截屏
经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能 ...
- js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现，兼容火狐，谷歌；canvas截屏跨域问题，无音频视频流加载不显示问题
项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...
- php结合phantomjs实现网页截屏、抓取js渲染的页面
首先PhantomJS快速入门 PhantomJS是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, ...
- JS实现网页选取截屏 保存+打印 功能(转)
源码地址: 1.1 确定截图选取范围 用户在开始截图后,需要在页面上选取一个截图范围,并且可以直观的看到,类似如下效果: image 我们的选取范围就是鼠标开始按下的那个点到鼠标拖动然后松开的那个点之 ...
- Linux截屏工具scrot用法详细介绍
Scrot是Linux命令行中使用的截图工具,能够进行全屏.选取等操作,下面小编将针对Scrot截图工具的用法给大家做个详细介绍,通过操作实例来学习Scrot的使用. 在Linux中安装Scrot ...
随机推荐
- Topcoder SRM 626 DIV2 FixedDiceGameDiv2
典型的条件概率题目. 事件A在另外一个事件B已经发生条件下的发生概率.条件概率表示为P(A|B),读作“在B条件下A的概率”. 若只有两个事件A,B,那么, P(A|B)=P(AB)/P(B) 本题的 ...
- ACM 素数
素数 时间限制:3000 ms | 内存限制:65535 KB 难度:1 描述 走进世博园某信息通信馆,参观者将获得前所未有的尖端互动体验,一场充满创想和喜悦的信息通信互动体验秀将以全新形式呈 ...
- 【BZOJ】2212: [Poi2011]Tree Rotations
题意 给一棵\(n(1 \le n \le 200000)\)个叶子的二叉树,可以交换每个点的左右子树,要求前序遍历叶子的逆序对最少. 分析 可以发现如果交换非叶结点的左右子树,对子树内的交换无影响, ...
- 【HDU】3506 Monkey Party
http://acm.hdu.edu.cn/showproblem.php?pid=3506 题意:环形石子合并取最小值= =(n<=1000) #include <cstdio> ...
- 【ORACLE】记录通过执行Oracle的执行计划查询SQL脚本中的效率问题
记录通过执行Oracle的执行计划查询SQL脚本中的效率问题 问题现象: STARiBOSS5.8.1R2版本中,河北对帐JOB执行时,无法生成发票对帐文件. 首先,Quartz表达式培植的启 ...
- BZOJ1443: [JSOI2009]游戏Game
如果没有不能走的格子的话,和BZOJ2463一样,直接判断是否能二分图匹配 现在有了一些不能走的格子 黑白染色后求出最大匹配 如果是完备匹配,则无论如何后手都能转移到1*2的另一端,故先手必输 否则的 ...
- 使用Eclipse构建Maven项目 (step-by-step)
Maven这个个项目管理和构建自动化工具,越来越多的开发人员使用它来管理项目中的jar包.本文仅对Eclipse中如何安装.配置和使用Maven进行了介绍.完全step by step. 如果觉得本文 ...
- 如何通过js和jquery获取图片真实的宽度和高度
什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都 ...
- pdf转word
一.刚需 pdf转word,这个需求肯定是有的.但是大家都知道,pdf是用来排版打印的,所以编辑起来会比较麻烦,所以,大家都会尝试将pdf的内容转成word,然后再进行编辑. 二.方法 1.用offi ...
- Material Design - CollapsingToolbarLayout
一.概述 CollapsingToolbarLayout是Material Design的一个Layout,直接继承于FrameLayout. 二.使用 1.导包 2.使用 - 设置相关属性 三.参考 ...