1、首先自己下载引入html2canvaces和jquery（我的demo路径是自己本地的）

2、点击截屏按钮后，跳出层的其他部分是取消保存，点击截取获得的图片区域，表示保存

<!DOCTYPE >

<html>

<head>

<title>截图</title>

<meta name="" content="" charset="utf-8" />

<style type="text/css">

#box{

width: 400px;

height: 300px;

border: 4px solid yellowgreen;

color: deeppink;

text-align: center;

line-height: 300px;

font-size: 50px;

}

button{

width: 200px;

height: 50px;

font-size: 20px;

}

#imgContent{

position: absolute;

top: 0;

left: 0;

width: 100%;

text-align: center;

background: rgba(0,0,0,0.4);

display: none;

}

</style>

</head>

<body>

<div id="box">

截屏效果测试

</div>

<button id="btn1">点击截图</button>

<div id="imgContent"></div> <!--用来装图片-->

</body>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/html2canvas.js"></script>

<script type="text/javascript">

$("#btn1").on("click",function(){

$("#imgContent").show(); /*装图片的盒子显示出来*/

$("#imgContent").css({"height":$("body").outerHeight()});/*装图片的盒子高度出来*/

html2canvas( $("#box") ,{ //box为要截屏的dom元素

onrendered: function(canvas){

var url = canvas.toDataURL(); /*获得的图片路径，base64*/

$("#imgContent").html(' <a href=""><img src="'+ url +'" /></a>');

/*避免事件重复绑定*/

$("#imgContent").off("click","img");

$("#imgContent").on("click","img",function (event) {

/*点击下载功能*/

$("#imgContent").find("a").attr( 'href' ,url) ;

$("#imgContent").find("a").attr( 'download' , 'caibao.png' ) ;

});

}

});

});

/*隐藏弹出层*/

$("#imgContent").on("click",function(){

$(this).hide();

});

</script>

</html>

html2canvaces用法，js截屏并且下载的更多相关文章

  1. 搭建前端监控系统（六）JS截屏和录屏篇

    怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后.错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决 ...

  2. js 截屏保存图片

    html2canvas.js 这个js有个强大的功能,就是能将html 对应的dom生成canvas. 这样,我们就可以通过生成的canvas转化成 base64 图片,从而实现截屏功能: 核心代码如 ...

  3. js截屏

    <html><head> <meta name="layout" content="main"> <meta http ...

  4. vue中使用html2canvas及解决html2canvas截屏图片模糊问题

    最近在项目中用到了html2canvas插件,遇到的一些坑写下来,与大家共勉. html2canvas  官方网站http://html2canvas.hertzen.com/index.html 这 ...

  5. 使用 JavaScript 截屏

    经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能 ...

  6. js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现，兼容火狐，谷歌；canvas截屏跨域问题，无音频视频流加载不显示问题

    项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...

  7. php结合phantomjs实现网页截屏、抓取js渲染的页面

    首先PhantomJS快速入门 PhantomJS是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, ...

  8. JS实现网页选取截屏 保存+打印 功能(转)

    源码地址: 1.1 确定截图选取范围 用户在开始截图后,需要在页面上选取一个截图范围,并且可以直观的看到,类似如下效果: image 我们的选取范围就是鼠标开始按下的那个点到鼠标拖动然后松开的那个点之 ...

  9. Linux截屏工具scrot用法详细介绍

    Scrot是Linux命令行中使用的截图工具,能够进行全屏.选取等操作,下面小编将针对Scrot截图工具的用法给大家做个详细介绍,通过操作实例来学习Scrot的使用.   在Linux中安装Scrot ...

随机推荐

  1. OpenResy+Lua 利用百度识图 将图片地址解析成文字

    LUA代码:(注:LUA里有一个调用百度识图的接口IP:123.125.115.189(stu.baidu.com),不知为什么我的虚拟机无法解析stu.baidu.com,所以我只能PING出IP来 ...

  2. ACM: hihicoder #1174 : 拓扑排序·一 STL- queue

    #1174 : 拓扑排序·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 由于今天上课的老师讲的特别无聊,小Hi和小Ho偷偷地聊了起来. 小Ho:小Hi,你这学期有选 ...

  3. 手机web站点和手机app 技术选型的困惑于思考

    今年一直在关注移动端技术的发展,自己也用博客园的rss接口玩了半年,关于技术选型的困惑和大家说说 一 趋势 随着手机硬件不断的升级,外加4g牌照的发放,不出2年时间移动端web站点和手机app一定会进 ...

  4. 硬盘分区工具gparted使用

    一.介绍 GParted是一款linux下的功能非常强大的分区工具,和windows下的‘分区魔术师’类似,操作和显示上也很相似.GParted可以方便的创建.删除分区,也可以调整分区的大小和移动分区 ...

  5. MapReduce输入格式

    文件是 MapReduce 任务数据的初始存储地.正常情况下,输入文件一般是存储在 HDFS 里面.这些文件的格式可以是任意的:我们可以使用基于行的日志文件, 也可以使用二进制格式,多行输入记录或者其 ...

  6. Hirbernate第三次试题分析

    解析:HQL语句可以执行T-SQL语句,但执行步骤较复杂,需引入jar包等各种配置. 解析:final修饰的成员变量必须由程序员显式地指定初始值.    static一般用于修饰全局变量 解析:Hib ...

  7. 全选，不选，反选js

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. Google Analytics统计代码GA.JS中文教程

    2010-12-06 11:07:08|  分类: java编程 |  标签:google  analytics  ga  js  代码  |举报|字号 订阅     Google Analytics ...

  9. 网络地址转换NAT原理及其作用

    1 概述 1.1 简介 NAT英文全称是“Network Address Translation”,中文意思是“网络地址转换”,它是一个IETF(Internet Engineering Task F ...

  10. sql 执行 delete 的时候，结合子查询 exists ，怎样支持别名呢？

    在做一个数据删除的时候,条件需要用到关联其他表,用到子查询,但是查询的时候使用 别名 没有问题,但是删除就有语法错误,在网上查询后得到了完美解决: --查询出来需要删除的数据 select * fro ...