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. Darkest page of my coding life

    The code i wrote a while ago recently caused a disaster and as I reviewed it I found it is the silli ...

  2. [深入浅出WP8.1(Runtime)]应用实例——移动截图

    10.2应用实例——移动截图 移动截图例子是实现一个把一张图片的某个部分截取出来的功能,并且用户可以选定截取的图片区间.那个该例子会使用ManipulationDelta事件来实现对截取区间的选择.然 ...

  3. HDU 4778 Gems Fight!(DP)

    题目链接 当我放弃的时候过了.sb啊,卡常数!!! 换了好几个姿势,本来没写预处理,预处理+俩剪枝,尼玛就过了.. #include <stdio.h> #include <stri ...

  4. 使用Uboot启动内核并挂载NFS根文件系统

    配置编译好内核之后,将生成的内核文件uImage拷贝到/tftpboot/下,通过tftp服务器将内核下载到开发板,使用命令:tftp 31000000 uImage.下载完成之后配置bootargs ...

  5. JAVA生成带Logo的二维码

    1.下载生成二维码所需要的jar包qrcode.jar: 2.直接上生成二维码的java代码 //需要导入的包 import java.awt.Color;import java.awt.Graphi ...

  6. console ouput 与 重定向输出 效率对比

    昨天做一个程序的性能测试的时候,由于用了自动化脚本,测试的时候直接把结果(包括执行时间等信息)输出到文件.后来我在调整源代码的时候单独跑了可执行文件,此时结果是输出到控制台(printf).大约100 ...

  7. view保存为图片

    一.概述 简书.微博.便签等都有将文章保存为图片的功能.笔者臆测,此功能的实现原理如下. 二.实现 2.1将View保存成Bitmap对象 方法1(亲测有效) private Bitmap makin ...

  8. Maya 建模完成后的整理

    我们在使用Maya建模完成后可能会进行发布,为了自己或他人的方便使用,我们需要对建立好的模型进行些处理: 1. 删除历史记录:选择模型,Edit -> Delete by Type -> ...

  9. ZK 父窗口与子窗口消息交互

    父窗口代码: 前台(test.zul) <?page title="" contentType="text/html;charset=UTF-8"?> ...

  10. Server Error in '/' Application

    在服务器部署了网站,然后访问的时候出现异常   Server Error in '/' Application,一般这样的异常都是不明确的,我们应当把网站根目录web.config<custom ...