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 ...
随机推荐
- Selenium webdriver操作日历控件
一般的日期控件都是input标签下弹出来的,如果使用webdriver 去设置日期, 1. 定位到该input 2. 使用sendKeys 方法 比如:使用定位: driver.findElement ...
- 从开启GTID功能的库同步数据到未开启GTID功能库时，注意事项！
从开启GTID的库中导出数据到未开启GTID的库中,需要注意,在导出的文件中去掉相应的gtid内容,否则导入时会报错如下: ERROR 1839 (HY000) at line 24 in file: ...
- 03-jQuery动画效果
Query提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 显示动画 方式一: $("div").show(); 解释:无参数, ...
- 根据word模板dotx文件创建word
doc = this._wordApplication.Documents.Add(@"D:\Fdsfsdsfsdfds.dotx"); 用这个会把模板的样式,文字内容都创建到新w ...
- [smf]论坛实现编辑器附件插入的插件
smf论坛代码的相关介绍,可以参见博客园的其他文章,这里不再详细说明了. 插件功能: 在帖子里的任何位置插入附件图片. 关于安装: 该插件已经经过“维尼熊的百宝箱”的修改,在新版本SMF 2.0.14 ...
- （转载）Linux之虚拟机 rehl7的ip
RHEL7最小化安装之后(桥接模式),我们查看本机IP, ip addr 我们要修改配置文件 找到目录 找到文件(每个人的ifcfg-eno16777736都不同),用vi编辑器打开修改配置文件 保存 ...
- Codeforces Round #525 (Div. 2) E. Ehab and a component choosing problem 数学
题意:给出树 求最大的sigma(a)/k k是选取的联通快个数 联通快不相交 思路: 这题和1个序列求最大的连续a 的平均值 这里先要满足最大平均值 而首先要满足最大 也就是一个数的时候可 ...
- [git] 文件操作
文件操作 1. git add 1.1 将未被git管理的文件添加到暂存区 一次可添加多个文件 文件夹,中间用空格隔开 git add 文件/文件夹 文件/文件夹 再次执行 git sta ...
- Python: Ubuntu 安装numpy,scipy,matplotlib
安装python-dev 安装这个包,以后安装各种python扩展包,可以省很多事情. sudo apt-get install python-dev 使用apt-get 安装 只需要下面的几个命令即 ...
- 初识The ONE
Author:bakari Date:2014.1.14 转载请注出处:http://www.cnblogs.com/bakari/p/3519841.html,谢谢! 本学期开始做真正意义上的研究 ...