<!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.14 codechef Chef at the Food Fair（线段树+泰勒展开）

    传送门 题意:现在有nnn个位置,每个位置上有一个值aia_iai​. 要求支持如下两种操作: 区间乘vvv 求区间的(1−ai)(1-a_i)(1−ai​)之积 思路: 考虑转换式子: Ans=∏i ...

  2. vue子传父多个值

    子组件:this.$emit("methdosName",data1,data2,data3) 父组件: <child @methodsName="xxx(argu ...

  3. qhfl-1 跨域

    CORS跨域请求 CORS即Cross Origin Resource Sharing 跨域资源共享,那么跨域请求还分为两种,一种叫简单请求,一种是复杂请求 简单请求 HTTP方法是下列方法之一 HE ...

  4. 前端之html表单

    html表单 用于搜集不同类型的用户输入 表单由不同类型的标签组成   1.<form>标签 定义整体的表单区域     * action属性 定义表单数据提交地址     * metho ...

  5. 技术文档生成工具：appledoc

    做项目一般都会要求写技术文档,特别是提供SDK或者基础组件的.如果手写这类技术文档的话,工作量比编写代码也少不了多少.比如 Java 语言本身就自带 javadoc 命令,可以从源码中抽取文档.本篇我 ...

  6. 788. Rotated Digits

    X is a good number if after rotating each digit individually by 180 degrees, we get a valid number t ...

  7. 腾讯大数据之TDW计算引擎解析——Shuffle

    转自 https://www.csdn.net/article/2014-05-19/2819831-TDW-Shuffle/1 摘要:腾讯分布式数据仓库基于开源软件Hadoop和Hive进行构建,T ...

  8. 常用 Linux 命令使用说明

    Linux 如果不知道某个命令的意思,通过  "man 命令" 可以查看它的使用方式及详细信息. 操作tomcat用到的相关命令 1.Enter 执行命令 2.Tab 自动补全命令 ...

  9. Linux - 快速进入目录的方法

    cd命令技巧 直接进入用户的home目录: cd ~ 进入上一个目录: cd - 进入当前目录的上一层目录: cd .. 进入当前目录的上两层目录: cd ../.. 其他常用方法 利用tab键,自动 ...

  10. 关于微信JS SDK接口wx.previewImage预览接口的使用

    然后后之前的项目,突然往微信上迁移了,一些微信的接口没怎么用过,比较陌生,这次的功能是想调用微信的接口,实现图片放大的功能, 就找到官方文档:http://qydev.weixin.qq.com/wi ...