利用html2canvas插件 对网页截图 并下载和上传图片。

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

<html>

<!--此网页演示了html2canvas网页截图下载 -->

<head>

    <!-- base.js实际上是jquery库,html2canvas.js是html2canvas自带的js库 -->

    <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">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <!--需要注意的是,这里一定要等待js库和网页加载完毕后再执行函数  -->

    <!-- 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' ) ;

                        //$('#down_button').css('display','inline-block');

                        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>

http://blog.163.com/yangyan6032@126/blog/static/1218798372014112225122898/

html2canvas 网页截图 下载 上传的更多相关文章

  1. 【HTML5+MVC4】xhEditor网页编辑器图片上传

    准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...

  2. 如何上传网站程序（文件浏览器上传网页、FileZilla上传网站程序）

    问题场景: 网页制作完成后,程序需上传至虚拟主机. 注意事项: Windows系统的主机请将全部网页文件直接上传到FTP根目录,即 / . Linux系统的主机请将全部网页文件直接上传到 /htdoc ...

  3. 图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

    一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...

  4. WP8.1 Study17：网络之后台下载/上传及HttpClient

    一.后台下载/上传 1.简介 使用BackgroundTransferGroup可以十分方便操作上传及下载文件,BackgroundDownloader和BackgroundUploader类中的方法 ...

  5. https 协议下服务器根据网络地址下载上传文件问题

    https 协议下服务器根据网络地址下载上传文件遇到(PKIX:unable to find valid certification path to requested target 的问题) 使用h ...

  6. git下载/上传文件提示：git did not exit cleanly

    问题:git操作下载/上传文件,提示信息如下 TortoiseGit-git did not exit cleanly (exit code 1) TortoiseGit-git did not ex ...

  7. xctf-i-got-id-200(perl网页文件+ARGV上传造成任意文件读取)

    打开url发现有三个链接,点进去都是.pl文件,且只有files可以上传文件. .pl文件都是用perl编写的网页文件 这里上传了又将文件的内容全部打印出来,那么猜想后台应该用了param()函数. ...

  8. python------接口（get请求、post请求）， 图片、歌曲下载，网页返回，上传文件

    接口(get请求.post请求 --json), 图片.歌曲下载(context),网页返回(text),上传文件   import requests######################### ...

  9. 在Vue项目中使用html2canvas生成页面截图并上传

    使用方法 项目中引入 npm install html2canvas html代码 //html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <di ...

随机推荐

  1. mysql分表与分区表

    mysql分表与分区表 转自:http://blog.51yip.com/mysql/949.html   一,什么是mysql分表,分区 什么是分表,从表面意思上看呢,就是把一张表分成N多个小表,具 ...

  2. struts2+hibernate-jpa+Spring+maven 整合(2)

    1.修改pom.xml 1. 添加  slf4j-api <dependency> <groupId>org.slf4j</groupId> <artifac ...

  3. 如何使用PHP实现一个WebService

    WSDL WSDL(网络服务描述语言,Web Services Description Language)是一门基于 XML 的语言,用于描述 Web Services 以及如何对它们进行访问.这种文 ...

  4. spoj 1437

    自己暴了一下不过     转一个 bfs... #include <cstdio> #include <vector> #include <queue> #incl ...

  5. spoj 1436

    用并查集看一下是否会围成一个环  若围成环直接输出NO   当然 当 m >= n  时必然会围成环直接输出NO #include <algorithm> #include < ...

  6. android下调试unity3d应用

    原地址:http://blog.csdn.net/armoonwei/article/details/7032455 目前貌似不支持断点调试,但可以通过日志打印(logcat)来跟踪. 在androi ...

  7. Grok debugger

    http://www.cnblogs.com/vovlie/p/4227027.html http://it.taocms.org/10/5802.htm

  8. hdu 4675 GCD of Sequence

    数学题! 从M到1计算,在计算i的时候,算出原序列是i的倍数的个数cnt: 也就是将cnt个数中的cnt-(n-k)个数变掉,n-cnt个数变为i的倍数. 且i的倍数为t=m/i; 则符合的数为:c[ ...

  9. MVC开发过程中的疑难杂症

    MVC使用客户端验证 <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type=& ...

  10. Android工具：延展图片NinePatch

    NinePatch能够对.png图片进行处理,生成一个.9.png格式的图片,图像拉伸操作时,图片就会有失真,而.9.png是Android里所支持的一种特殊的图片格式,可以实现部分拉伸. 制作图片方 ...