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. POJ3461Oulipo 题解

    题目大意: 求字符串A在字符串B中出现的次数. 思路: KMP板题,用Hash也可水过~要学习KMP可参考http://blog.csdn.net/u011564456/article/details ...

  2. css3+js打造炫酷图片展示

    <!DOCTYPE html> <html onselectstart="return false"> <!-- onselectstart=&quo ...

  3. Unity5.x版本AssetBundle打包研究

    Unity5的AssetBundle打包机制和以前版本不太一样.简单的说就是,只要给你要打包的资源设置一个AssetBundleName ,Unity自身会对这些设置了名字的资源进行打包,如果一个资源 ...

  4. 内存和flash存储的区别

    http://bbs.21ic.com/icview-202550-1-1.html 一.内存 我们一般说的内存指的是DRAM,其主要特点是断电会丢失数据,可读写 二.ROM 断电不会丢失数据,数据只 ...

  5. Windows Phone 8 Sync

    A lot of the below depends on the types of data, how often it is changing, and how often it is likel ...

  6. 使用swf与swc引入资源的区别[as3]

    SWF用于运行时加载,而SWC在编译时用做外部库.使用SWC库,只有当类被引用,才编译入主程序中. getDefinition: 在使用swc库方式引入资源时,getDefinitionByName反 ...

  7. 跨集群 distcp命令

    两个集群之间做数据同步,而且两个集群之间的版本不一致,这个时候使用的是hftp协议或者webhdfs协议! 如果试图在两个运行着不同HDFS版本的集群上使用distcp命令来复制数据并使用hdfs协议 ...

  8. HDU1443 模拟（难）

    Joseph Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  9. JAVA 线程同步异步简单实例

    package test; public class testThread { public static void main(String[] args) { Example example = n ...

  10. 手机自带的显示基站命令（android手机定位，iphone基站定位）

    手机自带的显示基站命令(安卓手机定位,苹果手机基站定位) 分类: 通信和网络2012-02-07 17:48 1734人阅读 评论(0) 收藏 举报 手机htciphone中兴三星网络 安卓手机自带快 ...