网页转图片,html生成图片,网页生成图片(基于linnux+phantomjs)

浏览:3306 发布日期:2015/04/09 分类:技术分享 关键字: 网页转图片 html生成图片 网页生成图片 网页截图 linnux+phantomjs
更多技术文档请访问: http://www.dahuzhi.com
安装扩展:
(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
下载后操作很简单,直接把解压好的binphantomjs移动到usrlocalbinphantomjs就可以了。
测试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 )
至此,字体已经安装完毕!

phantomjs.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>网页生成图片</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 {width: 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>  
phantomjs.jsvar page = require('webpage').create(); 
var args = require('system').args; 
 
var url = args[1]; 
var filename = args[2]; 
 
page.open(url, function () { 
    page.render(filename); 
    phantom.exit(); 
}); 
最佳答案
评论( 相关
后面还有条评论,点击查看>>