<!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. 说说Runnable与Callable

    Callable接口: public interface Callable<V> { V call() throws Exception; } Runnable接口: public int ...

  2. form表单数据进行json转换

    $.fn.serializeJson = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { ...

  3. 18.数组(一)之认识java数组

    数组是一个简单的复合数据类型,它是一组有序数据的集合,它当中的每一个数据都具有相同的数据类型,我们通过数组名再加上一个不会越界的下标值来唯一确定数组中的元素. 还有就是,数组是一个特殊的对象. 不管在 ...

  4. JDK、JRE、JVM之间的关系

       JDK.JRE.JVM之间的关系 1.JDK下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads ...

  5. 第二十四节：Java语言基础-讲解数组的综合应用

    数组的综合应用 // 打印数组 public static void printArray(int[] arr) { for(int x=0;x<arr.length;x++) { if(x!= ...

  6. 第七节：详细讲解Java中的日期，java.util.date

    前言 大家好,给大家带来详细讲解Java中的日期,java.util.date的概述,希望你们喜欢 类Date Java.lang.Object->java.util.Date public c ...

  7. 678 "流浪地球"为什么是个好地方？（系统越复杂拥有好运气的机会也就越大）

    运气,其实就是一个复杂系统孕育出的,超出已知经验的解决方案.它不是没有产生机制.只不过,这个机制太复杂,涉及的因素太多.我们没法复制.所以,我们只能笼统的,把这套机制称为运气,或者命数. 举个例子,假 ...

  8. MySQL 中的数字类型

    MySQL 中数据类型常用的就三大类: 数字类型/numeric types 日期和时间/date and time types 字符类型/string (character and byte) ty ...

  9. Studying

    美团spark实践:http://tech.meituan.com/spark-in-meituan.html CDH5.6.0-HBase1.0.0:http://archive.cloudera. ...

  10. Django--cookie操作

    day74 会话跟踪技术 什么是会话跟踪 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而 ...