利用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. [转载]js 遍历数组对象

    有一个JSON数组如下 all = {"error":0,"content":[{"name":"北京","v ...

  2. 软件调试之INT 3讲解

    第4章断点和单步执行 断点和单步执行是两个经常使用的调试功能,也是调试器的核心功能.本章我们将介绍IA-32 CPU是如何支持断点和单步执行功能的.前两节将分别介绍软件断点和硬件断点,第4.3节介绍用 ...

  3. 看几道JQuery试题后总结（下篇）

    感谢圆友的提醒 昨天下午完成了9道试题中的前4道,之后好多园友存在些疑惑和建议,在这里我一并说一下吧.首先对于昨天第一题可能存在误导,在JQuery中并没有innerHTML这个属性,不过我们可以将J ...

  4. php获取类的实例变量

    <?php class Page {private $title; //构造函数固定名称为__construct,这样能将php的类构造函数独立于类名,以后修改类名就无需修改构造函数名称 fun ...

  5. 深入理解Java内存模型（二）——重排序

    本文属于作者原创,原文发表于InfoQ:http://www.infoq.com/cn/articles/java-memory-model-2 数据依赖性 如果两个操作访问同一个变量,且这两个操作中 ...

  6. 【mysql的编程专题⑥】视图

    视图是表的一个映射,是一张虚表,在结构上视图和普通的表没什么区别,一样可以用sql语句来增删改查; 视图创建后是一直存在数据库内 操作 创建视图 语法 CREATE [ALGORITHM]={UNDE ...

  7. NPOI的测试代码

    NPOI\testcases\main\testcases vs10.csproj 需要注意,重新引用一下NPOI类库 需要注意的是,测试项目,使用了NUnit 找到测试项目下的SS文件夹,再定位到U ...

  8. Application.CommonAppDataPath的路径

    Application.CommonAppDataPath; win7的路径 C:\ProgramData\CompanyName\ProductName\2.0.5.1 [assembly: Ass ...

  9. bash 正则表达式匹配，一行文本中 “包含 ABC” 并且 “不包含 XYZ”

    bash 正则表达式匹配,一行文本中  “包含 ABC”  并且  “不包含 XYZ” A文件: XXXX ABC XXX4444444444444444XXXX ABC XXX XYZ6666666 ...

  10. mac terminal终端ls命令参数详解

    原文:https://developer.apple.com/library/mac/documentation/Darwin/Reference/ManPages/man1/ls.1.html -a ...