<!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 截取屏幕的更多相关文章

  1. Android实例-程序界面内截取屏幕(XE8+小米2)

    结果: 1.只能截取程序界面内的图片. 2.图片有点不清楚,自己设置清楚度. 实例代码: unit Unit1; interface uses System.SysUtils, System.Type ...

  2. jQuery截取字符串插件区分中英文

    jQuery截取字符串插件区分中英文:截取字符串功能在大量网站都有应用,比如新闻列表这样的功能,因为新闻的标题长途未必都是恰如其分的,所以要根据需要截取指定长度的字符串,下面就分享一个jQuery实现 ...

  3. cocos2d-x 截取屏幕可见区域

    在游戏中,我们经常需要分享到社交网络的功能.分享时,我们时常会需要用到截屏的功能.目前网上的文章虽然很多,但是都是截取的 设计分辨率(DesignResolutionSize)大小的屏幕,而这个并不是 ...

  4. jQuery截取字符串、日期字符串转Date、获取html中的纯文本

    jQuery截取字符串.日期字符串转Date.获取html中的纯文本. var com = com || {}; (function ($, com) { /* * 截取字符串 * @param st ...

  5. C# 截取屏幕图像

    #region 截取屏幕图像 private static Bitmap GetScreenCapture() { Rectangle tScreenRect = , , Screen.Primary ...

  6. jquery检测屏幕宽度并跳转页面

    jquery检测屏幕宽度并刷新页面 var owidth = ($(window).width()); //浏览器当前窗口可视区域宽度 if(owidth<640){//小于640跳转一个网址, ...

  7. html2canvas截取屏幕的方法

    html2canvas截取屏幕的方法 需要放在服务上运行,否则会报错, 放在服务器里,完美运行  处理截屏模糊的方法 html2canvas 0.5.0-beta3解决截图模糊问题 需要引入html2 ...

  8. C# 截取屏幕

    /// <summary> /// 截取屏幕 /// </summary> /// <param name="x">起点X坐标</para ...

  9. 使用jQuery在屏幕上居中一个DIV

    文章目录 我如何去使用jQuery在屏幕的中心设置<div>? 我喜欢给jQuery添加函数,所以这个函数将有助于: jQuery.fn.center = function () { th ...

随机推荐

  1. 14. The Realities of Telecommuting 远程办公的现状

    14. The Realities of Telecommuting 远程办公的现状 (1) Telecommuting——substituting the computer for the trip ...

  2. php上传图片预览，放大，裁剪

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 2018年2月19日我的java学习

    2019/2/18 星期一今天学习了Java 中的面向对象思想主要学习了类 构造器等在学习修饰属性的过程中,有4点必须牢记前提是理解类的各种关系 类中有5种关系 本身 同包类 同包继承子类 不同包继承 ...

  4. java jar 包加载文件问题

    场景:   A 项目是一个服务,然后部署到本地 maven 仓库里,然后 B 项目依赖 A 项目,调用  A 项目的方法,但是发现,报错,说找不到文件(config.xsv).这就很奇怪了,怎么会呢, ...

  5. [ 9.26 ]CF每日一题系列—— 771B递推问题

    Description: 给定你命名的规律,1-10个字符,开头必须大写,最多有50个名字,然后告诉你有n个人,判断区间长度为k,那么你将得到n - k + 1个答案(YES or NO) 表示1 - ...

  6. maya2019卸载/安装失败/如何彻底卸载清除干净maya2019注册表和文件的方法

    maya2019提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装maya2019失败提示maya2019安装未完成,某些产品无法安装,也有时候想重新安装maya ...

  7. Bootstrap轮播如何支持移动端左右滑动

    一直觉得bootstrap的轮播用起来很好用,代码简单,又支持响应式,不过从来没想过,也不知道原来bootstrap的轮播竟然不支持在手机上左右滑动 解决方法就是:使用滑动手势js插件:hammer. ...

  8. Java学习笔记52（网络编程：UDP协议案例）

    InetAddress类: 表示互联网中的IP地址,示例: package demo; import java.net.InetAddress; import java.net.UnknownHost ...

  9. Apache多站点配置（ubuntu）（原创）

      1,先进入Apaches2的目录下 cd /etc/apache2   2,进入sites-available中 cd sites-available vi 000-default.conf   ...

  10. Spark之submit任务时的Initial job has not accepted any resources; check your cluster UI to ensure that workers are registered and have sufficient memory

    Spark submit任务到Spark集群时,会出现如下异常: Exception 1:Initial job has not accepted any resources; check your ...