html转image--通过casperjs在服务器端实现

最新推荐文章于 2020-09-24 11:20:20 发布

jason_czm

最新推荐文章于 2020-09-24 11:20:20 发布

阅读量688

点赞数

分类专栏： Php 文章标签： casperjs html to image in ser

本文链接：https://blog.csdn.net/jason_czm/article/details/54846389

版权

Php 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

casperjs可以理解为phantomjs的二次开发，所以安装使用casperjs之前必须要先安装phantomjs。

(一),Install

(1) http://phantomjs.org/download.html
download:phantomjs-2.1.1-linux-x86_64.tar.bz2
tar -jxvf /home/developer/casper/phantomjs-2.1.1-linux-x86_64.tar.bz2

ln -sf /home/developer/casper/phantomjs/bin/phantomjs /usr/bin/phantomjs
phantomjs --version
=>2.1.1

(2)http://casperjs.org/
download: casperjs-1.1.3.zip
解压
ln -sf /home/developer/casper/casperjs/bin/casperjs /usr/bin/casperjs
casperjs --version
=>1.1.2

(二)casperjs文件准备

/**
casperjs /path/to/capture.js page_url filename.png [selector]
第一个参数是网页的网址
第二个截取屏幕后的存储的文件的名
第三个参数是选择器，比如'.main'，'.content'，'#data-list'之类的（支持CSS3选择器）。此参数是可选的，如果指定了，就只会截取该选择器命中的区域。否则，就截取整个网页。
*/
var casper = require('casper').create({
    verbose: true,
    logLevel: 'debug',
    viewportSize:{width:1920,height:1200}
});

var args = casper.cli.args;
var url = args[0];
var filename = args[1];
var selector = args[2];

casper.start(url);
var callbackFun = function() {
    var args = [filename];
    var method = 'capture';
    if (selector) {
        args.push(selector);
        method = 'captureSelector';
    }
    this[method].apply(this, args);
}

var nextStep ='then';
var nextStepArgs= [callbackFun];
if(selector){
    nextStep = 'waitForSelector';
    nextStepArgs.unshift(selector);
    nextStepArgs.push(function(){this.echo('Timeout Error!!!')});
    nextStepArgs.push(10000);
}

casper[nextStep].apply(casper,nextStepArgs);

casper.run(function() {
    this.echo('Done.').exit();
});

(三)terminal测试

casperjs /home/developer/casper/test.js http://www.baidu.com /home/developer/casper/baidu.png

==>至此，服务器端可以截取html页面，生成图片。

(四)服务器端执行cmd

以php语言为例

(1)Web服务器端

public function screenShotAndUpload(){

            /*
           * casperjs /home/developer/casper/test.js http://xxxxx/product/sizeTable/form?encode_prd_dat_siz_tbl=xxxxxxxx /home/developer/casper/test.png '#size-table-real'
           */

           $url = getAdminHost()."/product/sizeTable/form?encode_prd_dat_siz_tbl=".$encode_prd_dat_siz_tbl;
           $target_file_path = '/home/developer/casper/test.png';
           $selector = "'#size-table-real'";

            $cmd = "casperjs /home/developer/casper/test.js {$url} {$target_file_path} {$selector}";
           ob_start();
           @system($cmd);
           ob_end_clean();

           $cfile = new CURLFile($target_file_path,'image/png','test.png');
           list($curl_getinfo, $result) = $this->requestFileApi('/product.php', array(
                'up' => $cfile
           ));

           $result = json_decode($result, TRUE);

...........................

获取文件服务器返回的url应答，进行db保存

}

    private function requestFileApi($file_serverse_url, $params) {
       $ch = curl_init();
       curl_setopt ($ch, CURLOPT_URL, $file_serverse_url);
       curl_setopt ($ch, CURLOPT_HEADER, FALSE);
       curl_setopt ($ch, CURLOPT_POST, TRUE);
       curl_setopt ($ch, CURLOPT_SAFE_UPLOAD, TRUE);
       curl_setopt ($ch, CURLOPT_POSTFIELDS, $params );
       curl_setopt   ($ch, CURLOPT_RETURNTRANSFER, TRUE);
       $response = curl_exec($ch);
       $curl_getinfo = curl_getinfo($ch);
       curl_close($ch);
       return array($curl_getinfo, $response);
   }

(2)文件服务器端

<?php
   require_once('xxx.php');
   require_once('yyy.php');

   $response = array();
   $response['error']       = TRUE;
   $response['msg']       = 'File Upload Error';
   $response['original']   = '';
   $response['thumbnail']   = '';
   $response['preview']   = '';

   $file_name = hash('sha256', uniqid());
   $file_name_temp = str_split($file_name, 2);
   $sub_path = $file_name_temp[0];
   $y = date('Y');
   $md = date('md');

   $d = 'dafault';
   $path_uri = getFileHost().'/files/'.$d.'/'.$y.'/'.$md.'/'.$sub_path.'/';
   $path = rtrim(getFilesPath(), '/').'/files/'.$d.'/'.$y.'/'.$md.'/'.$sub_path.'/';
   makeDir($path);

   if (!isset($_FILES["up"]) || !is_uploaded_file($_FILES["up"]["tmp_name"]) || $_FILES["up"]["error"] != 0)
   {
       header("HTTP/1.1 500 Fail uploaded images.");
       $response['error']       = TRUE;
       $response['msg']       = 'Fail uploaded images.';
       echo json_encode($response);
       exit;
   }

   $parse_file_arr   = explode('.', strtolower(trim($_FILES['up']['name'])));
   $file_ext = array_pop( $parse_file_arr );
   $file_path = "{$path}{$file_name}.{$file_ext}";

   if (move_uploaded_file($_FILES['up']['tmp_name'], $file_path))
   {
       $response['original'] = "{$path_uri}{$file_name}.{$file_ext}";

       if(isset($_POST['thumbsize']) || isset($_POST['presize']) ) {
           $thumb = new Imagick($file_path);

           if(isset($_POST['thumbsize'])) {
               $thumbsize = explode('x', urldecode($_POST['thumbsize']));
               if(count($thumbsize) == 2)
               {
                   $thumb->thumbnailImage((int)$thumbsize[0], (int)$thumbsize[1]) ;
                   $thumb->writeImages(getUploadThumbnailPath($file_path), true);
                   $response['thumbnail'] = getUploadThumbnailPath($response['original']);
               }
           }

           if(isset($_POST['presize'])) {
               $presize = explode('x', urldecode($_POST['presize']));
               if(count($presize) == 2)
               {
                   $thumb->thumbnailImage((int)$presize[0], (int)$presize[1]);
                   $thumb->writeImages(getUploadPreviewPath($file_path), true);
                   $response['preview'] = getUploadPreviewPath($response['original']);
               }
           }

           $thumb->clear();
           $thumb->destroy();
       }
       $response['error']       = FALSE;
       $response['msg']       = "success";
   }
   else
   {
       header("HTTP/1.1 500 Fail uploaded images.");
       $response['error']       = TRUE;
       $response['msg']       = 'Fail uploaded images.';
   }

   echo json_encode($response);
?>