<!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. leetcode437--Path Sum III

    https://leetcode.com/problems/path-sum-iii/ 理解比较困难,可以先看https://www.cnblogs.com/albert67/p/10416402.h ...

  2. noip第13课资料

  3. 阅读笔记4 我是一只IT小小鸟

    经过一周连续三四天八小时以上坐在电脑前敲代码的“折磨”,去看看其他经受这些折磨的人的感受.这次读书笔记变成了逗比风,因为前几周认认真真记下书里写的重点内容,然后把学习的内容认真的记录下来的笔记被老师助 ...

  4. Awake()跟Start()差在哪？

    刚开始学Unity的时候,最难搞定的就是这两个functions的差异,依照官方文件所描述的: Awake(): Awake is called when the script instance is ...

  5. Nhibernate入门篇连接Sqlserver的增删查改

    第一步:创建数据库 create table Emp( EmpId int primary key identity, EmpName ), EmpDate date ) 第二步:去官网下载:http ...

  6. JQuery Mobile - 动态修改select选择框的选中项

    <label for="day">选择天</label> <select name="day" id="day" ...

  7. Jenkins高危代码执行漏洞检测/开源漏洞靶场

    漏洞细节可以参看安全客的文章:https://bbs.ichunqiu.com/thread-22507-1-1.html Jenkins-CLI 反序列化代码执行(CVE-2017-1000353) ...

  8. 教你怎么看网站是用react搭建的

    概述 SPA和react可以说是web开发的分水岭,我一直在寻找判断网站是普通网站还是SPA抑或是react的方法.今天突然找到一个判断网站是不是react搭建的简便方法.现在记录下来供以后开发时参考 ...

  9. Swift5 语言指南(十八) 可选链接

    可选链接是一个查询和调用当前可选的可选项的属性,方法和下标的过程nil.如果optional包含值,则属性,方法或下标调用成功; 如果是可选的nil,则返回属性,方法或下标调用nil.多个查询可以链接 ...

  10. php开发中应该注意的错误开关与常见处理[开发篇]

    我们可能一开始就接触一个项目的开发,刚开始时都是信心满满,一定把这个项目做得非常完美,但是时间那么少,任务那么多,我们就只有将就了. 首先,一般情况下,我们会加一个调试标志,define('APP_D ...