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

前端实现

缺点是：兼容性查，需要高级浏览器支持，因为需要支持 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. 转：SQL Server附加数据库提示“版本为661，无法打开，支持655版本……”

    在我们使用别人导出的数据库的时候,有时候我们会通过附加数据库的方法,把别人导出的数据库附加到我们的电脑中,这时,或许你会遇到这种问题,附加时,提示版本为XXX,无法打开,支持AAA版本. 这是怎么回事 ...

  2. .NET开源工作流RoadFlow-表单设计-子表

    子表即明细表 从表:与主表对应在子表. 从表主键:从表的主键. 主表字段:主表中与从来关联的字段,一般为主表的主键. 与主表关联字段:从表中与主表关联的字段. 选择之后即可在下面从表字段列表中设置每个 ...

  3. .NET开源工作流RoadFlow-表单设计-复选按钮组

    复选按钮组的设置与单选按钮组的设置相同,只是表现形式为:<input type="checkbox"/>

  4. Qt之QSS（Q_PROPERTY-原始属性）

    http://blog.csdn.net/liang19890820/article/details/51698536 版权声明:进步始于交流,收获源于分享!纯正开源之美,有趣.好玩.靠谱...作者: ...

  5. 【Leetcode】【Easy】Remove Nth Node From End of List

    Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...

  6. python学习笔记（1）----python安装

    1.下载Python for windows 废话不说,直接上网址:https://www.python.org/ftp/python/3.5.1/python-3.5.1.exe 2.安装Pytho ...

  7. March 10 2017 Week 10 Friday

    If you love life, life will love you back. 爱生活,生活也会爱你. Love life, and it will love you back. All thi ...

  8. zt dup() 和 dup2()

    dup() 和 dup2() 2011-10-07 11:06:31|  分类: Linux学习心得 |字号 订阅   dup和dup2都可用来复制一个现存的文件描述符,使两个文件描述符指向同一个fi ...

  9. java--final 类在程序中的影响

    很多时候我都记不住也弄不太清楚final类在程序的中的作用到底为何,今天正好看到了,就把它记下来,省的以后忘了的时候到处找资料~ final修饰符对程序的影响总的来说有三点: (1)final可以修饰 ...

  10. codefind.pl

    #!/usr/bin/perl # # Find a pattern in a the book's source collection (DOS/Windows version) # # (C) C ...