利用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. Java发送邮件(带附件)

    实现java发送邮件的过程大体有以下几步: 准备一个properties文件,该文件中存放SMTP服务器地址等参数. 利用properties创建一个Session对象 利用Session创建Mess ...

  2. SQL的表连接

    每天给自己扫盲,让自己变得越博学. 继续学习<程序员的SQL金典>,这回我们来看看表连接相关的内容.表连接的相关知识在实际的项目开发当中,使用非常广. 所谓表连接,就是通过关联多张表,从而 ...

  3. jQuery.serializeArray() 函数详解

    serializeArray()函数用于序列化一组表单元素,将表单内容编码为一个JavaScript数组. serializeArray()函数常用于将表单内容序列化为JSON对象,以便于被编码为JS ...

  4. The 6th Zhejiang Provincial Collegiate Programming Contest->ProblemF：80ers' Memory

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3207 题意:给出N个关键字符串,然后给出k行,每行Ni个字符串,找出每行有 ...

  5. Java Code Examples for org.springframework.http.HttpStatus

    http://www.programcreek.com/java-api-examples/index.php?api=org.springframework.http.HttpStatus

  6. 在linux下，查看一个运行中的程序， 占用了多少内存

    1. 在linux下,查看一个运行中的程序, 占用了多少内存, 一般的命令有 (1). ps aux: 其中  VSZ(或VSS)列 表示,程序占用了多少虚拟内存. RSS列 表示, 程序占用了多少物 ...

  7. [矩阵快速幂]HDOJ4565 So Easy!

    题意:给a, b, n, m 求 $\left \lceil ( a+ \sqrt b )^n \right \rceil$ % m 看到 $( a+ \sqrt b )^n$ 虽然很好联想到共轭 但 ...

  8. php中对共享内存，消息队列的操作

    http://www.cnblogs.com/fengwei/archive/2012/09/12/2682646.html php作为脚本程序,通常生命周期都很短,如在web应用中,一次请求就是ph ...

  9. uboot源码整体框架

    源码解压以后,我们可以看到以下的文件和文件夹:  cpu 与处理器相关的文件.每个子目录中都包括cpu.c和interrupt.c.start.S.u-boot.lds. cpu.c:初始化CPU.设 ...

  10. git rebase无法处理的问题

    在进行代码整理的时候,遇到了冲突 现在chucklu_master分支指向这个commit SHA-1: 88fa1ee9263402626d85b5a4362e1b620935953f * remo ...