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 ...
随机推荐
- SAD算法在opencv上的实现代码（c++）
#include <opencv2/opencv.hpp>#include <opencv2/core/core.hpp>#include <opencv2/highgu ...
- ACM : Travel-并查集-最小生成树 + 离线-解题报告
Travel Time Limit:1000MS Memory Limit:131072KB 64bit IO Format:%I64d & %I64u /*题意 给出n[节点 ...
- 洛谷 P1015 回文数 Label：续命模拟QAQ
题目描述 若一个数(首位不为零)从左向右读与从右向左读都一样,我们就将其称之为回文数. 例如:给定一个10进制数56,将56加65(即把56从右向左读),得到121是一个回文数. 又如:对于10进制数 ...
- ThinkPad_T430重装系统
联想thinkpad T430为T系列的旗舰级产品,全新的ThinkPad T430将该系列坚固的机身.稳定高效的散热表现.超强的易用性.不俗的性能以及出色的操控感受等优点完美的继承下来,始终坚持把每 ...
- CentOS转的服务器磁盘规划
我的服务器是500G.最重要的是/var分区一定要大(不论postfix邮件,还是LAMP的WEB 服务器等).最好是400G以上.具体的/boot 只要100M就足够了.下面是我的分区方案:硬盘50 ...
- 给自定义cell赋值代码
// // ViewController.m // 11 - 投资管理 - 李洪强 // // Created by vic fan on 16/4/8. // Copyright © 201 ...
- AJAX回调(调用后台方法返回数据)
记得先要导入jquery.js. 格式一 $.ajax({"Key1":"value1","key2":"value2" ...
- zk jquery的使用
jQuery_effects.zul: <?page title="Jquery" contentType="text/html;charset=UTF-8&quo ...
- bootstrap学习笔记之三（组件的使用）
bootstrap组件需要引入bootstrap.js才行,当然要引入bootstrap.js首先得引入JQuery. 一.下拉菜单 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另 ...
- 移动端设备UA检测
网上找到的都不全,不是漏这个就是漏那个,有的甚至还把桌面的chrome判断为移动浏览器. 于是自己动手整理,这回算是比较全了.以后发现漏掉的立马加上. if(/AppleWebKit.*Mobile/ ...