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

前端实现

缺点是：兼容性查，需要高级浏览器支持，因为需要支持 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. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

  2. JSTL标签概述

    什么是JSTL JSP 标准标记库(JSP Standard Tag Library,JSTL)是一个实现 Web 应用程序中常见的通用功能的定制标记库集,这些功能包括迭代和条件判断.数据管理格式化. ...

  3. import模块后查找模块的绝对路径

    >>> import bsddb3>>> bsddb3.__file__'/usr/local/lib/python2.6/site-packages/bsddb3 ...

  4. 通过 Powershell 来替换 ARM 模式下虚拟机的网络接口

    需求描述 客户在部署完 ARM 模式的虚拟机以后,由于误操作在虚拟机内部禁用了网卡导致远程访问虚拟机受到限制,以下是通过 Powershell 命令来替换原有虚拟网络接口实现虚拟网卡重置功能. Not ...

  5. Oracle彻底杀掉进程

    kill session 是DBA经常碰到的事情之一.如果kill 掉了不该kill 的session,则具有破坏性,因此尽可能的避免这样的错误发生.同时也应当注意,如果kill 的session属于 ...

  6. May 12th 2017 Week 19th Friday

    Love asks faith, and faith asks firmness. 爱情要求忠诚,而忠诚要求坚贞. Love, as well as many other relations amon ...

  7. [转]简单优化：Zipalign

    转自:http://www.cnblogs.com/xirihanlin/archive/2010/04/12/1710164.html Android SDK中包含一个“zipalign”的工具,它 ...

  8. python 用cookie模拟登陆网站

    import re import requests def get_info(url): headers = { "Cookie" :"***************** ...

  9. note04-计算机网络

    4.WLAN无线局域网(wareless local area network) IEEE802.11无线以太网协议标准 基础服务集合BSS 基站AP 服务服务集合标识SSID 即wifi名 分配系统 ...

  10. Codeforces Round #513

    A. Phone Numbers 题意:给一些数字,每个电话号码以8开头,11位,求最多组成多少个号码,重复累加. #include <bits/stdc++.h> using names ...