<!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. 2019.02.21 bzoj2300: [HAOI2011]防线修建（set+凸包）

    传送门 题意:动态维护凸包周长. 思路: 见这篇求面积的吧反正都是一个套路. 代码: #include<bits/stdc++.h> #define int long long #defi ...

  2. ECharts初体验

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...

  3. SQL Server CTE 递归查询全解 -- 转 学习

    在TSQL脚本中,也能实现递归查询,SQL Server提供CTE(Common Table Expression),只需要编写少量的代码,就能实现递归查询,本文详细介绍CTE递归调用的特性和使用示例 ...

  4. [ 10.03 ]CF每日一题系列—— 534B贪心

    Descripe: 贪心,贪在哪里呢…… 给你初始速度,结尾速度,行驶秒数,每秒速度可变化的范围,问你行驶秒数内最远可以行驶多少距离 Solution: 贪心,我是否加速,就是看剩下的时间能不能减到原 ...

  5. 595. Big Countries --- SQL related from leetcode

    595. Big Countries There is a table World +-----------------+------------+------------+------------- ...

  6. Servlet的补充知识

    ServletContextAware是获取ServletContext一个接口.只需要实现此接口重写里面的setServletContext方法,spring在初始化的时候通过xmlClasspat ...

  7. Android Fragment用法知识点的讲解

    Android Fragment用法的讲解 碎片,它的出现是为了更好展示UI的设计,让程序更加得到充分的展示.Fragment的出现,如微信的额主界面包含多个Fragment,使得微信功能更加简洁明了 ...

  8. Spring boot 配置 log4j2.xml

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...

  9. 从 moment -> nodejs -> sequelize -> postgres，你都得设置好时区

    背景 最近在做报表统计,因为 sequelize 的时区配置没加导致了统计数字对不上的问题. 问:大家都知道时区,但是你清楚 UTC 和 GMT 的区别吗? 答:UTC 是我们现在用的时间标准,GMT ...

  10. PCA降维实验代码

    实验需要提取数据的空间信息,所以要对光谱进行降维,使用主成分分析算法,样例代码备份如下 # -*- coding: utf-8 -*- """ Created on Mo ...