利用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. vncserver 添加用户

    1.在vncserver设置登录用户的信息   #vi /etc/sysconfig/vncservers   VNCSERVERS="1:root 2:wt" 此处添加用户   ...

  2. 你不需要jQuery(五)

    什么不用jQuery?因为它让你的网站体积变得臃肿.你的网站并不真的需要jQuery,不需要它带来的额外体积.带宽和加载时间. 用原生JavaScript简单实现jQuery提供的功能和方法 查找.选 ...

  3. Usermod 命令详解

    参考资料:usermod manpage usermod - 修改用户帐户信息 modify a user account usermod [options] user_name usermod 命令 ...

  4. SQLite数据库简介(转)

    大家好,今天来介绍一下SQLite的相关知识,并结合Java实现对SQLite数据库的操作. SQLite是D.Richard Hipp用C语言编写的开源嵌入式数据库引擎.它支持大多数的SQL92标准 ...

  5. 跌跌撞撞，用MAVEN看图说话的编译了一个JAR出来

    URL: http://www.yiibai.com/maven/create-a-java-project-with-maven.html mvn archetype:generate -Dgrou ...

  6. log4jdbc-remix安装配置

    1.maven安装依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://w ...

  7. Nginx、LVS及HAProxy负载均衡软件的优缺点详解

    http://www.csdn.net/article/2014-07-24/2820837

  8. Android：反编译查看源码

    下载>>>>>>>>>>>>>>> 使用图形化反编译工具:Androidfby 打开Androidfby中的A ...

  9. BIG5编码表

    Big5 (Traditional Chinese) character code table code +0 +1 +2 +3 +4 +5 +6 +7 +8 +9 +A +B +C +D +E +F ...

  10. 1682. Crazy Professor(并查集）

    1628 加了些数论知识  先看下剩余类的概念 一个整数被正整数n除后,余数有n种情形:0,1,2,3,…,n-1,它们彼此对模n不同余.这表明,每个整数恰与这n个整数中某一个对模n同余.这样一来,按 ...