文档章节

html2canvas页面截图

wftt
 wftt
发布于 2018/03/22 18:03
字数 208
阅读 91
收藏 0
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<a type="button" id="btn"><button id="copy">点击复制图片</button></a>
	<div class="myImg" style="position:relative;">
	    <img src="1.jpg">
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script>

	$("#copy").click(function(){
	    html2canvas($(".myImg"),{ // $("body")截图是全部内容,$(".myImg")是你要复制生成canvas的区域,可以自己选
	        onrendered:function(canvas){
	            dataURL =canvas.toDataURL("image/png");
	            $("body").append(canvas);

	            //下载图片
	            $('#btn').attr( 'href' ,  dataURL ) ;
	            $('#btn').attr( 'download' , 'download.png' ) ;

	        },
	        width:300,
	        height:300
	    })
	})

	
</script>
</html>

这就是全部代码,要下载html2canvas.js或者引入cdn。

截图看效果:

注意:要放在服务器运行,否则点击之后发现并没有截下图片。

© 著作权归作者所有

wftt
粉丝 11
博文 38
码字总数 24507
作品 0
海淀
前端工程师
私信 提问
html2canvas-实现页面截图

如何将HTML页面保存为图片? 将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含图片展示的data url。 使用HtmlCanvas2实现。 使用rasterizeHTML.js实现。 优缺点分析: ...

爱吃橘子的毛毛虫
2018/10/31
0
0
JavaScript实现页面截图的类库 - html2canvas

html2canvas是一个相当不错的JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功 能。html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成c...

匿名
2011/12/11
30.1K
2
跪求js大神~~问题如下~~~

问题如下用html2canvas截图制定元素图片保存不下来问题~ 链接如下:(源码直接查看页面就行了~,查看截图弹出框内容直接贴入浏览器~~) http://hcw.weixintizi.com/index.php?s=/addon/Shop/...

请叫我赵小宝
2015/08/04
199
0
html2canvas截图如何解决跨域的问题?

1、问题描述 如果不跨域的话,截图正常。 如果有跨域的图片,那么js报错,报错信息如下: Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvas......

对岸
2015/11/17
15.6K
2
Javascript将html转成pdf,下载(html2canvas 和 jsPDF)

最近碰到个需求,需要把当前页面生成pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 项目源码地址:https://github.com/linwalker/render-html-to-pdf html2ca...

孟飞阳
2018/08/15
200
0

没有更多内容

加载失败,请刷新页面

加载更多

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
今天
15
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
5
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.4K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部