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. 20145330Java程序设计第三次实验

    20145330<Java程序设计>第三次实验报告 实验三 敏捷开发与XP实践 实验内容 1.使用git上传代码 2.使用git实现代码开发实践 3.实现代码的重载 实验步骤 使用git上 ...

  2. linux下转换U盘文件系统

    打算在windows 7 下复制一个12G 的文件至U盘,无奈U盘为FAT32格式,最大支持移动4G 的文件,只能将U盘文件系统格式化为NTFS.windows 7系统出现问题,转化中总是出现错误.故 ...

  3. 黑马程序员----java基础笔记上（毕向东）

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 笔记一共记录了毕向东的java基础的25天课程,分上.中.下 本片为上篇,涵盖前10天课程 1. ...

  4. HTML DOM随笔

    编程接口 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). 属性是您能够获取或设置的值(比如节点的名称或内容). getElemen ...

  5. win10添加打印机--无法访问指定设备，路径或文件。。

    win10添加打印机无法访问指定设备,路径或文件..后来发现很多按钮点击多说无法访问指定设备,路径或文件.. 解决添加打印机问题: 在搜索栏中搜索:print (从这里添加) 彻底解决: 添加环境变量 ...

  6. Daily Scrum 10.29

    今天大家的工作做的还算不错,但是晚些时候遗憾的得知我们的吴文会同学生病住院了,所以她明天的任务暂时保留,再做调整.希望大家在努力学习工作的同时一定要注意身体啊! 下面是今天的Task统计:

  7. MySQL Server-id踩到的坑

    最近踩到一个说大不大,说小不小的坑,在此分享出来给各位同学.事情是这样的,线上有2台服务器,1主1从.A -> B,B服务器从A服务器同步数据.每天使用xtrabackup在B服务器上面进行全备 ...

  8. 矩形的个数-nyoj206

    描述在一个3*2的矩形中,可以找到6个1*1的矩形,4个2*1的矩形3个1*2的矩形,2个2*2的矩形,2个3*1的矩形和1个3*2的矩形,总共18个矩形.给出A,B,计算可以从中找到多少个矩形.   ...

  9. Android课程---课下练习（表格、线性和相对布局）

    1.表格布局 练习代码: <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns: ...

  10. SQL Server 存储过程（转）

    Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用.当存储过程执行一次后,可以将语句缓存中,这样下次执行的时候直接使用缓存中的语句.这样就可以提高存储过程的性能. Ø ...