jquery 截取屏幕
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Test</title>
<style type="text/css">
*{
margin:0 auto;
padding:0;
}
.btn{
width:100px;
height:30px;
line-height:30px;
background:green;
color:#fff;
border-radius:10px;
-webkit-border-radius:10px;
text-align:center;
display:block;
text-decoration:none;
}
.container{
background:#e5e5e5;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>
<script> $(function(){
$("#btn").click(function(){
html2canvas($("#container"), {
onrendered: function(canvas) {
//把截取到的图片替换到a标签的路径下载
$("#download").attr('href',canvas.toDataURL());
//下载下来的图片名字
$("#download").attr('download',new Date().getTime() + ".png");
//展示图片
document.body.appendChild(canvas);
}
});
});
});
</script>
</head> <body>
<div style="padding:10px 0">
<div class="btn" id="btn">截取屏幕</div>
<p style="color:red; text-align:center;">先点击截取屏幕后再点击截图下载</p>
<div style="margin-top:10px">
<a href="javascript:;" rel="external nofollow" class="btn" id="download">截图下载</a>
</div>
</div>
<div class="container" id="container">
<p style="text-align:center">这里是待截取模块</p>
</div>
</body>
</html>
jquery 截取屏幕的更多相关文章
- Android实例-程序界面内截取屏幕(XE8+小米2)
结果: 1.只能截取程序界面内的图片. 2.图片有点不清楚,自己设置清楚度. 实例代码: unit Unit1; interface uses System.SysUtils, System.Type ...
- jQuery截取字符串插件区分中英文
jQuery截取字符串插件区分中英文:截取字符串功能在大量网站都有应用,比如新闻列表这样的功能,因为新闻的标题长途未必都是恰如其分的,所以要根据需要截取指定长度的字符串,下面就分享一个jQuery实现 ...
- cocos2d-x 截取屏幕可见区域
在游戏中,我们经常需要分享到社交网络的功能.分享时,我们时常会需要用到截屏的功能.目前网上的文章虽然很多,但是都是截取的 设计分辨率(DesignResolutionSize)大小的屏幕,而这个并不是 ...
- jQuery截取字符串、日期字符串转Date、获取html中的纯文本
jQuery截取字符串.日期字符串转Date.获取html中的纯文本. var com = com || {}; (function ($, com) { /* * 截取字符串 * @param st ...
- C# 截取屏幕图像
#region 截取屏幕图像 private static Bitmap GetScreenCapture() { Rectangle tScreenRect = , , Screen.Primary ...
- jquery检测屏幕宽度并跳转页面
jquery检测屏幕宽度并刷新页面 var owidth = ($(window).width()); //浏览器当前窗口可视区域宽度 if(owidth<640){//小于640跳转一个网址, ...
- html2canvas截取屏幕的方法
html2canvas截取屏幕的方法 需要放在服务上运行,否则会报错, 放在服务器里,完美运行 处理截屏模糊的方法 html2canvas 0.5.0-beta3解决截图模糊问题 需要引入html2 ...
- C# 截取屏幕
/// <summary> /// 截取屏幕 /// </summary> /// <param name="x">起点X坐标</para ...
- 使用jQuery在屏幕上居中一个DIV
文章目录 我如何去使用jQuery在屏幕的中心设置<div>? 我喜欢给jQuery添加函数,所以这个函数将有助于: jQuery.fn.center = function () { th ...
随机推荐
- linux 系统管理学习
Linux系统管理一.进程管理1.进程管理的作用1)判断服务器健康状态2)查看系统中所有进程3)杀死进程2.进程的查看1)查看所有进程ps aux 查看系统中所有进程ps -le 查看系统中所有进程- ...
- 第40章：MongoDB-集群--Replica Sets(副本集)---副本集的管理
①以单机模式启动成员 由于很多维护的工作需要写入操作,所以不合适在副本集中操作,可以以单机模式启动成员,也就是不要使用副本的选项,就跟以前启动单独的服务器一样.一般使用一个跟副本集配置中不一样的端口号 ...
- Python PEP 8 编码规范中文版
原文链接:http://legacy.python.org/dev/peps/pep-0008/ 转发链接:https://blog.csdn.net/ratsniper/article/detail ...
- windows10环境下安装Tensorflow
1.什么是tensorflow TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理.Tensor(张量)意味着N维数组,Flow(流)意味着 ...
- CUDA并行编程思维过程
CUDA并行编程思维过程 1)确定应用程序中需要且可以并行化的部分 2)将并行化代码中需要用到的数据分离出来,具体方法是用API函数在并行技术设备上分配内存空间 3)用API函数将数据传输到并行计算设 ...
- 第 1 篇 Scrum 冲刺博客
各个成员在 Alpha 阶段认领的任务 姓名 Alpha 阶段认领的任务 徐婉萍 创建服务器.域名,环境搭建查询界面及页面的设计,查询方法的编写 谭燕 支出.收入添加界面及设计,收入.支出的方法编写, ...
- 背水一战 Windows 10 (89) - 文件系统: 读写文本数据, 读写二进制数据, 读写流数据
[源码下载] 背水一战 Windows 10 (89) - 文件系统: 读写文本数据, 读写二进制数据, 读写流数据 作者:webabcd 介绍背水一战 Windows 10 之 文件系统 读写文本数 ...
- Android Fragment用法知识点的讲解
Android Fragment用法的讲解 碎片,它的出现是为了更好展示UI的设计,让程序更加得到充分的展示.Fragment的出现,如微信的额主界面包含多个Fragment,使得微信功能更加简洁明了 ...
- Bootstrap轮播如何支持移动端左右滑动
一直觉得bootstrap的轮播用起来很好用,代码简单,又支持响应式,不过从来没想过,也不知道原来bootstrap的轮播竟然不支持在手机上左右滑动 解决方法就是:使用滑动手势js插件:hammer. ...
- 一致性hash理解、拜占庭将军问题解读和CAP理论总结
一致性hash理解 白话概述: 比如说存储图片,有10台服务器用来存储,对图片名进行hash(pic_name)%10得到的值就是图片存放的服务器序号.这是正常的hash算法分散图片存储.但是有一天, ...