先分析下这个技术可实现的方式，以及优缺点吧！

前端实现

缺点是：兼容性查，需要高级浏览器支持，因为需要支持 canvas 绘图，还有就是会操作 html5 canvas api。(如果不会使用canvas的话，要么去学，要么这条方案当我没说)
优点是：用户体验性很赞，很流畅。

大体实现方法：使用canvas。最终可将绘制的图像生成成图片。用户可以另存为保存，也可以将生成的二进制图片，上传服务器，生成连接。

后端实现

缺点是：体验性会差很多，因为需要和服务器交互，体验流畅度会差一点。 优点：客户端兼容性好，基本支持所有浏览器。

大体方法：前端负责组织数据。后端负责根据数据生成图片。后端解决的话就比较简单了，有了数据买就是把位置对好，生成图片，就行了。 nodejs, python, java, php 都用很多绘图库。

具体实现流程这里就不废话了。点到为止。下面便是具体的代码实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

		<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>

		<script type="text/javascript" src="http://www.boolaw.com/tpl/default/js/jquery-1.8.3.min.js"></script>

		<title>html2canvas网页截图</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

		<meta http-equiv="description" content="this is my page">

		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!-- html2canvas()中,第一个参数是要截图的Dom对象，第二个参数时渲染完成后回调的canvas对象。  -->

		<script type="text/javascript">

			$(function(){

				print();

			});

			function print(){

				html2canvas( $("#canv") ,{

					onrendered: function(canvas){

						$('#down_button').attr( 'href' , canvas.toDataURL() ) ;

						$('#down_button').attr( 'download' , 'myjobdeer.png' ) ;

						var html_canvas = canvas.toDataURL();

						$.post('', {order_id:1,type_id:2,html_canvas:html_canvas}, function(json){

						}, 'json');

					}

				});

			}

		</script>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	</head>

	<body>

		<div id="canv">

		此网页演示了html2canvas截图后将截图后的网页追加到了原网页之上		<br>		<br>

		这里可以看作是边界线		<hr/>

		</div>

		<a type="button" id="down_button">下载</a>

	<?php

if (isset($_POST['html_canvas'])) {

	$order_id = $_POST['order_id'];

	$type_id = $_POST['type_id'];

	$html_canvas = $_POST['html_canvas'];

	$image = base64_decode(substr($html_canvas, 22));

	header('Content-Type: image/png');

	$filename = $order_id . '-' . $type_id . ".png";

	$fp = fopen($filename, 'w');

	fwrite($fp, $image);

	fclose($fp);

}

?>

	</body>

</html>

　　

利用html2canvas将当前网页保存为图片.的更多相关文章

  1. html2canvas 把h5网页保存为图片 区域保存

    html2canvas 把h5网页保存为图片 想把一个网页得某些元素,绘制成图片保存,有些数据是接口动态加载的,所以不能UI给到图片,需要我们把api的数据也绘制到图片上 html2canvas这个插 ...

  2. 基于html2canvas实现网页保存为图片及图片清晰度优化

    一.实现HTML页面保存为图片 1.1 已知可行方案 现有已知能够实现网页保存为图片的方案包括: 方案1:将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含 ...

  3. 如何实现批量截取整个网页完整长截图,批量将网页保存成图片web2pic/webshot/screencapture/html2picture

    如何实现批量截取整个网页完整长截图,批量将网页保存成图片web2pic/webshot/screencapture [困扰?疑问?]: 您是否正受到:如何将网页保存为图片的困扰?网页很高很长截图截不全 ...

  4. 火狐浏览器FireFox 如何将整个网页保存为图片

    使用Friefox的Pearl Cresent Page Saver插件 如图所示网页有很长的滚动条 点击右下角的该插件选项,将整个页面保存为图片 在桌面上得到了这样一个文件,大小是1263×6083 ...

  5. C# WebBrowser的DrawToBitmap方法 截取网页保存为图片

    bool mark = true;         private void btnOpen_Click(object sender, EventArgs e)         {           ...

  6. C# 整个网页保存成图片

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. 修改css的（屏蔽）overflow: hidden;实现浏览器能把网页全图保存成图片

    摘要: 1.项目需要,需要对网页内容“下载”保存成全图片 2.QQ浏览器等主流浏览器都支持这种下载保存功能 3.项目需要场景:编写好的项目维护文档,放在服务器上.如果是txt不能带图片可视化,如果wo ...

  8. asp自动解析网页中的图片地址，并将其保存到本地服务器

    程序实现功能:自动将远程页面的文件中的图片下载到本地. 程序代码 <% '将本文保存为 save2local.asp '测试:save2local.asp?url=http://ent.sina ...

  9. 利用 html2canvas 做个简单的诗词卡片生成器

    html2canvas 简介 html2canvas 顾名思义,就是一个可以把 DOM 元素转换成图片的类库,常用于网页截图.网页截图常见的应用场景是,在意见反馈里对当前页面进行截图,方便反馈页面出现 ...

随机推荐

  1. 工作流一期上线原创小故事——【加签】OR【不准】

    亲!您有过选择[加签]还是审核[不准]的烦恼吗? 加签分为:向前加签和向后加签,这个相信大家都很熟悉了吧. 审核分为:准和不准,就是√和×,这个相信大家也很熟悉了. 提示①:相邻的2个人审核时,如果意 ...

  2. .Net中会存在内存泄漏吗

    所谓内存泄露就是指一个不再被程序使用的对象或变量一直被占据在内存中..Net 中有垃圾回收机制,它可以保证一对象不再被引用的时候,即对象编程了孤儿的时候,对象将自动被垃圾回收器从内存中清除掉.虽然.N ...

  3. windows server 2008 64位MySQL5.6免安装版本配置说明

    1 通过官网下载MySQL5.6版本压缩包,mysql-5.6.36-winx64.zip: 2 在D盘创建目录,比如D:\MySQL,将mysql-5.6.36-winx64.zip解压缩到该目录下 ...

  4. （三）svn 服务器端之创建仓库

    创建仓库 svn服务端创建完成需要创建仓库,仓库中存放 要被管理的文件. 通过开始菜单进入  VisualSVN server manager: 主界面为: 右键点击Repositories创建仓库 ...

  5. Qt 线程初识别

    Qt有两种多线程的方法,其中一种是继承QThread的run函数,另外一种是把一个继承于QObject的类转移到一个Thread里. 这里我使用的是继承的方法使用线程花一个"复杂" ...

  6. LeetCodeOJ刷题之15-16【3Sum（三数和问题）】

    本文为两个题:[三数和(3Sum)]与[最近三数和(3Sum Closest)]问题 第一部分分析3Sum问题,第二部分分析3Sum Closest问题,由于两个问题的思路很像,所以这里放到一起分析. ...

  7. [转]Ubuntu桌面入门指南

    Ubuntu桌面入门指南 http://wiki.ubuntu.org.cn/Ubuntu%E6%A1%8C%E9%9D%A2%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97

  8. Android（java）学习笔记13：线程组的概述和使用

    1. Java中使用ThreadGroup来表示线程组,它可以对一批线程进行分类管理,Java允许程序直接对线程组进行控制. (1)默认情况下,所有的线程都属于主线程组. public final T ...

  9. HDU 3336 KMP

    题意:求每一个前缀,跟前缀相同的每个子串. 此题:网上很多都是假程序,不过也AC了,的确我测试几个案例之后的的确确是存在这个问题. 分析:每一个前缀,可以考虑KMP,f失配指针,如何求得它出现了多少次 ...

  10. bzoj 2434 [Noi2011]阿狸的打字机——AC自动机

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2434 dfs AC自动机,走过的点权值+1,回溯的时候权值-1:走到询问的 y 串的节点,看 ...