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. OpenResty 安装 drizzle-nginx-module

    1.下载drizzle模块 wget http://openresty.org/download/drizzle7-2011.07.21.tar.gz 2.安装drizzle模块 tar zxvf d ...

  2. ACM A problem is easy

    A problem is easy 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 When Teddy was a child , he was always th ...

  3. 【BZOJ】3240: [Noi2013]矩阵游戏

    题意 给出\(n, m(1 \le n, m \le 10^{1000000})\),求\(f(n, m) \ \mod \ 10^9+7\) $$\begin{cases}f(1, 1) = 1 \ ...

  4. [BZOJ2793][Poi2012]Vouchers

    2793: [Poi2012]Vouchers Time Limit: 20 Sec  Memory Limit: 64 MBSubmit: 316  Solved: 148[Submit][Stat ...

  5. Android -- TabHost

    TabHost 也就相当于Windows下的选项框 有两种实现方式 1.  继承TabActivity (已经废弃):从TabActivity中用getTabHost()方法获取TabHost 2. ...

  6. BZOJ4517: [Sdoi2016]排列计数

    Description 求有多少种长度为 n 的序列 A,满足以下条件: 1 ~ n 这 n 个数在序列中各出现了一次 若第 i 个数 A[i] 的值为 i,则称 i 是稳定的.序列恰好有 m 个数是 ...

  7. Java_JAVA6动态编译的问题

    摘自:http://www.iteye.com/problems/14909 在使用JAVA6动态编译时遇到的一个问题,动态编译方法已经写就.通过main方法调用的动态编译时,编译通过,并可以使用编译 ...

  8. mysql 查看语句的执行效率

    EXPLAIN 一.用途: 1.什么时候必须为表加入索引以得到一个使用索引找到记得的更快的select 2.知道优化器是否以一个最佳次序联结表. <官方的关于explain的文档在http:// ...

  9. （转）深入理解flash重绘

    深入理解Flash Player重绘 Flash Player 会以SWF内容的帧频速度来刷新需要变化的内容,而这个刷新的过程,我们通常称为“重绘(redraw)”,相信即便是初级的菜鸟也知道,只要使 ...

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

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