利用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. Webstorm10.0.4注册码

    分享几个Webstorm10的注册码: (1) user name :EMBRACE ===== LICENSE BEGIN =====17739-1204201000002KkN!4z2O8JEyj ...

  2. uva 701

    参考了一下http://hi.baidu.com/renxl51/item/e80b688f9f54aadd5e0ec1de 给一个数字x,求最小的正整数e,使得pow(2,e) == x*pow(1 ...

  3. 用 OneAPM Cloud Insight 监控 Docker 性能

    Docker 是构建和部署软件的一个新兴的轻量级的平台,也是一个减轻替代虚拟机的容器.Docker 通过给开发者提供兼容不同环境的镜像,成为解决现代基础设施的持续交付的一个流行的解决方案. 和虚拟机一 ...

  4. c++实现文本中英文单词和汉字字符的统计

    源代码下载:http://download.csdn.net/detail/nuptboyzhb/4987141 1.统计文本中汉字的频数,为后续的文本分类做基础.对于汉字的统计,需要判断读取的是否为 ...

  5. NPOI.dll学习

    NPOI 是 POI 项目的 .NET 版本.POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目. 简介 编辑 使用 NPOI 你就可以在没有安装 Office 或者相应环 ...

  6. Linux系统下如何配置SSH？如何开启SSH？

    SSH作为Linux远程连接重要的方式,如何配置安装linux系统的SSH服务,如何开启SSH?下面来看看吧(本例为centos系统演示如何开启SSH服务). 查询\安装SSH服务 1.登陆linux ...

  7. spring事物的传播行为

    1.spring事物的传播行为,主要是用来解决业务层拥有事物的方法,相互调用的问题. 2.声明事物, 在代码执行前,开启事务.代码执行完,提交事务 3.spring并没有提供事务具体的处理,而只是调用 ...

  8. mysql的group by应用

    CREATE TABLE group_test (  id TINYINT(1) UNSIGNED NOT NULL, pubid TINYINT(1) UNSIGNED NOT NULL, user ...

  9. Fundamental Datastructure

    11988 - Broken Keyboard (a.k.a. Beiju Text) 可以用deque来模拟. #include <iostream> #include <stri ...

  10. 摄像头(1)拍照的主要API,权限和特性,判断有没有摄像头的方法

    支持 Android SDK支持操作Android设备内置的照相机.从Android2.3开始,支持操作多个摄像头(主要指前置摄像头和后置照相机).通过照相机可以拍照和录像. 注意事项 是否支持照相机 ...