zoukankan      html  css  js  c++  java
  • 网页转图片,html生成图片,网页生成图片(基于linnux+phantomjs)和wkhtmltoimage

    安装扩展:
      (1)下面是我在linux上的安装过程,如果没有安装git请先yum install git
        安装casperjs
        cd /
        git clone git://github.com/n1k0/casperjs.git
        cd casperjs
        ln -sf /casperjs/bin/casperjs /usr/local/bin/casperjs  //可以忽略 实际执行中php是执行 /casperjs/bin/casperjs
     
      
        (2)安装phantomjs,下载地址:http://phantomjs.org/download.html
           下载后操作很简单,直接把解压好的inphantomjs移动到usrlocalinphantomjs就可以了。
           测试phantomjs --version 有结果不报错,说明安装OK
     
        (3)安装字体
          1. 首先获得一套“微软雅黑”字体库(Google一下一大把),包含两个文件msyh.ttf(普通)、msyhbd.ttf(加粗);
          2. 在/usr/share/fonts目录下建立一个子目录,例如win,命令如下:
              # mkdir /usr/share/fonts/win
          3. 将msyh.ttf和msyhbd.ttf复制到该目录下,例如这两个文件放在/root/Desktop下,使用命令:
              # cd /root/Desktop
              # cp msyh.ttf msyhbd.ttf  /usr/share/fonts/win/
          4. 建立字体索引信息,更新字体缓存:
              # cd /usr/share/fonts/win
              # mkfontscale  (如果提示 mkfontscale: command not found,需自行安装 # yum install mkfontscale )
              # mkfontdir
              # fc-cache    (如果提示 fc-cache: command not found,则需要安装# yum install fontconfig )
              至此,字体已经安装完毕!

    PHP代码

    <?php  
        if (isset($_GET['url']))  
        {  
            set_time_limit(0);  
       
            $url = trim($_GET['url']);  
            $filePath = md5($url).'.png';  
            if (is_file($filePath))  
            {  
                exit($filePath);  
            }  
     
            //如果不加这句就会报错“Fatal: [Errno 2] No such file or directory; did you install phantomjs?”,详情参考http://mengkang.net/87.html
            putenv("PHANTOMJS_EXECUTABLE=/usr/local/bin/phantomjs");
            $command = "phantomjs phantomjs.js {$url} {$filePath}";  
            @exec($command);  
       
            exit($filePath);  
        }  
    ?>  
       
    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
    <meta name="keywords" content="" />  
    <meta name="description" content="" />  
    <title>快照生成-www.oicqzone.com</title>  
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>  
    <style>  
    * {margin: 0; padding: 0; } form {padding: 20px; } div {margin: 20px 0 0; } input { 200px; padding: 4px 2px; } #placeholder {display: none; }
    </style>
    </head>  
       
    <body>  
        <form action="" id="form">  
            <input type="text" id="url" />  
            <button type="submit">生成快照</button>  
       
            <div>  
                <img src="" alt="" id="placeholder" />  
            </div>  
        </form>  
        <script>  
        $(function(){  
            $('#form').submit(function(){  
                if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true)  
                {  
                    alert('正在生成网站快照,请耐心等待...');  
                    return false;  
                }  
       
                $(this).data('generate', true);  
                $('button').text('正在生成快照...').attr('disabled', true);  
       
                $.ajax({  
                    type: 'GET',  
                    url: '?',  
                    data: 'url=' + $('#url').val(),  
                    success: function(data){  
                        $('#placeholder').attr('src', data).show();  
                        $('#form').data('generate', false);  
                        $('button').text('生成快照').attr('disabled', false);  
                    }  
                });  
       
                return false;  
            });  
        });  
        </script>  
    </body>  
    </html>

    JS代码

    "use strict";
    var RenderUrlsToFile, arrayOfUrls, system;

    system = require("system");
    var args = require('system').args;
    var url = args[1];
    //var output = args[2];
    var page = require('webpage').create();
    phantom.outputEncoding = "gbk"; //解决中文乱码
    var address = url;//填写需要打印的文件位置
    var output = './img/'+'xigua'+'.png';//存储文件路径和名称
    page.viewportSize = { 720, height: 1200};//设置长宽
    //page.clipRect = { top: 0, left: 0, 380, height: 560 };
    page.open(address, function (status) {
    if (status !== 'success') {
    console.log('Unable to load the address!');
    phantom.exit();
    } else {
    window.setTimeout(function () {
    page.render(output);
    phantom.exit();
    }, 800);
    }
    });


    方法二:
    $file_name = rand(100000,999999).".jpg";
    $path = '/nas/wxdoctor/tempimg/'.$file_name;
    $cmd ="wkhtmltoimage --width 750 --height 1206 --quality 94 $url ".$path;
     
  • 相关阅读:
    B. Spreadsheets
    Frequent values 倍增/线段树离散化
    E. Tree Painting 二次扫描换根法
    1405 树的距离之和 二次扫描换根法
    D. Subarray Sorting
    K
    Max answer(单调栈,rmq)
    POJ2823 (单调队列)
    POJ2559(单调栈入门)
    Principles and strategies for mathematics study
  • 原文地址:https://www.cnblogs.com/zuochuang/p/6282508.html
Copyright © 2011-2022 走看看