教你用ThinkPHP+Krpano实现全景图

下面由thinkphp教程栏目给大家介绍tthinkphp3.2+krpano实现全景图，希望对需要的朋友有所帮助！

ThinkPHP3.2+Krpano实现全景图

为了实现全立体的3D全景图效果，我们采用了Krpano软件将普通鱼眼图片渲染为720°全景图

说明：代码有过调整，并不能保证运行，主要说明实现思路。
首先下载软件Krpano全景图生成软件，其中包含Linux版本及Win版本以及简单的使用手册文件。
其实简单的使用只需两步，第一步是将上传的图片生成显示全景图需要的图片，第二步是根据全景图的显示规则和配置文件将全景图显示出来。

【相关推荐：最新的10个thinkphp视频教程】

上传图片并生成全景图

立即学习“PHP免费学习笔记（深入）”；

原理很简单，将图片上传到服务器，然后将服务器的图片通过Linux软件生成全景图，并将生成后的图片转移到统一的目录中。

在开始上传图片前，需要修改Win的配置文件Krpano如下：

# krpano 1.19# 引入基本设置include basicsettings.config# 全景图类型 自动 如果可以识别自动，不能识别图片会询问处理方法panotype=autodetecthfov=360# 输出设置flash=truehtml5=true# convert spherical/cylindrical to cubicalconverttocube=trueconverttocubelimit=360x45# multiresolution settingsmultires=truemaxsize=8000maxcubesize=2048# 输出图片路径tilepath=%INPUTPATH%/pano/%BASENAME%.tbs-pano/3d-pano-[c].jpg# 输出预览图图片设置preview=truegraypreview=falsepreviewsmooth=25previewpath=%INPUTPATH%/pano/%BASENAME%.tbs-pano/3d-pano-preview.jpg# 输出缩略图图片设置makethumb=truethumbsize=240thumbpath=%INPUTPATH%/pano/%BASENAME%.tbs-pano/3d-pano-thumb.jpg

上传接口代码如下：

public function upload_3d_pic(){    $file = $_FILES["imgUpload"];    $u_name =$file['name'];    $u_temp_name =$file['tmp_name'];    $u_size =$file['size'];        // 生成 一个随机字符串    $str = null;    $strPol = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123tbs456789abcdefghijklmnopqrstuvwxyz";    $max = strlen($strPol)-1;    for($i=0;$iajaxReturn(array("error_code"=>250,"msg"=>"图片上传失败，请稍后重试！","return"=>"move pic fail>>temp_name=".$u_temp_name.">>save file name=".$saveFileName));    } else {        @rmdir($f_up_to_path);    }    //判断文件是否存在    if(file_exists($saveFileName)){        //如果存在 则生成 全景图        $this->create_pano_pic($saveFileName);        // 如果 此时没有生成图片 需要删除上传图片并报错 平面图可能生成不了图片        $dirName = dirname($saveFileName) . '/pano' . '/' . $md5Code . '.tbs-pano';        if ( !file_exists($dirName) ) {            unlink($saveFileName); // 删除文件            $this->ajaxReturn(array('error_code'=>250,"msg"=>"上传图片不能生成全景图"));        }        //移动全景图到指定的目录 图片在哪里全景图将会生成在那个目录        $mvres = $this->mv_to_pano_path($saveFileName,$img_file_name);        if ( $mvres === false ) {            $this->ajaxReturn(array('error_code'=>250,"msg"=>"移动文件失败"));        }    }else{        $this->ajaxReturn(array('error_code'=>250,"msg"=>"img not exists!",'img_url'=>$true_img_url));    }    // 移动后的缩略图路径    $thumb_url = $url_path . 'TreeDPic/' . $md5Code . '/pano/' . $md5Code . '.tbs-pano/3d-pano-thumb.jpg';    $this->ajaxReturn(array(        'error_code'=>0,        'msg'=>"sucess",        'img_url'=>$true_img_url,        "pano_name"=>$md5Code,        'thumb_url'=>$thumb_url)     );}/**** @param string $img_path* @return string* 将当前传入的图片 渲染成为全景图*/private function create_pano_pic($img_path=""){    if(empty($img_path)){        return $img_path;    }    if(!file_exists($img_path)){        return "图片不存在！";    }    //软件注册码    $r_code ="Krpano的注册码";    $pano_path=C("KRPANO_PATH"); //krpano 路径 自己配置    $pano_tools ="krpanotools";    //krpano 生成图片的命令    $dealFlat = ''; // 处理 非球面图    if(PHP_OS == 'WINNT'){        $pano_path=$pano_path."Win";        $pano_tools ="krpanotools32.exe";    } else {        // 上传平面图时 直接跳过图片生成 否则会一直等待        $dealFlat = 'echo -e "0\n" | ';     }        $kr_command = $dealFlat . $pano_path . "/".$pano_tools." makepano -config=" . $pano_path . "/templates/normal.config ";    try{        //在生成图片之前 先注册一下码，要不生成的全景图会有水印        exec( $pano_path . '/'.$pano_tools.' register ' .$r_code);        $kr_command =$kr_command.$img_path;        //执行生成图片命令        exec($kr_command, $log, $status);    } catch (\Exception $e){        $this->ajaxCallMsg(250,$e->getMessage());    }    return true;}/*** @param $pano_img_path* @return string* 全景图生成后再调用这个方法，把全景图移到对应的目录供 xml 文件获取内容*/private function mv_to_pano_path($pano_img_path,$img_name){    $ig_name =explode(".",$img_name)[0];    $root_path = './upload_3dpic/';    if(!file_exists($pano_img_path) ||empty($pano_img_path)){        $this->up_error_log($pano_img_path.'》》图片路径文件不存在');        return '';    }    $now_path =dirname($pano_img_path);//获取当前文件目录    if ($dh = @opendir($now_path)){        //打开目录        while (($file = readdir($dh)) !== false){            //循环获取目录的 文件            if (($file != '.') && ($file != '..')) {                //如果文件不是.. 或 . 则就是真实的文件                if($file=="pano"){                    //全景图切片目录                    $t_d_path =$root_path .'TreeDPic/'. $ig_name;                    if(!file_exists($t_d_path)){                        //不存在就创建                        @mkdir($t_d_path, 0777, true);                    }                    if(file_exists($t_d_path.'/'.$file)){                        //判断是否已经存在 当前名字的  全景图 文件                        return false;                    }else{                        //否则就 把 当前上传的生成 的全景文件切片，移动到指定的目录                        rename($now_path.'/'.$file,$t_d_path.'/'.$file);                    }                }else if ($file !==$img_name){                    //删除不是 原图片的文件                    if(is_dir($file)){                        $this->deleteDir($now_path.'/'.$file);                    }else{                        @unlink($now_path.'/'.$file);                    }                }else{                    return false;                }            }        }        closedir($dh);    }else{        return false;    }}/*** @param $dir* @return bool* 删除文件夹及文件*/private  function deleteDir($dir){    if (!$handle = @opendir($dir)) {        return false;    }    while (false !== ($file = readdir($handle))) {        if ($file !== "." && $file !== "..") {       //排除当前目录与父级目录            $file = $dir . '/' . $file;            if (is_dir($file)) {                $this->deleteDir($file);            } else {                @unlink($file);            }        }    }    @rmdir($dir);}

此时，我们已经可以通过上传接口上传图片并通过Krpano渲染图片为全景图了。

显示全景图

要将图片显示出来，我们必须按照Krpano/templates/normal.config规则生成必须的Krpano配置文件。

我们将根据上传图片是生成的唯一码作为依据生成全景图。

// 解析XML文件public function panorama_xml(){    $code =I("code");    $cutNum =intval(I("cutNum"));    $url_path = '/upload_3dpic/';       // 切割模式分为 6图 和 12图    if(!in_array($cutNum,array(6,12))){        $this->error();    }    $this->echoSixXml($url_path,$code);}private function echoSixXml($url_path,$code=""){    echo "                        <!-- -->             <!-- 视图设置  -->                                                                                                                                                                                        <!---->                                                ";    }

其中Krpano并不会当前的效果图渲染出来，而是在我们在多张全景图之间进行选择的时候通过xml自动触发。

设置显示页面的路由及方法:

public function panorama(){    //先 获取id （md5值）    $code =trim(I("code"));    //图片切割方式  6图（采集的是6图） 和12图（比较复杂建议生成图片 用6图 配置切割）    $cutNum =intval(I("cutNum"));    $this->assign("codeVal",$code);    $this->assign("cutNum",$cutNum);    $this->display();}

相应的视图文件中：

                                            @-ms-viewport { width:device-width; }        @media only screen and (min-device-width:800px) { html { overflow:hidden; } }        html { height:100%; }        body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }        .loading{            /* display: none; */            width: 100%;            height: 100%;            position: absolute;            top: 0;            left: 0;            z-index: 3;            background-color: #fff;            color:#333;            z-index: 100;        }        .loadingimg {            width: 184px;            height: 108px;            position: absolute;            top: 50%;            left: 50%;            -webkit-transform: translateX(-50%) translateY(-50%);            -moz-transform: translateX(-50%) translateY(-50%);            -ms-transform: translateX(-50%) translateY(-50%);            transform: translateX(-50%) translateY(-50%);            text-align: center;        }        .loadingimg img {            width: 100%;            height: 100%;        }        .poiner {            display: inline-block;            width: 16px;            vertical-align: bottom;            overflow: hidden;            /* animation: poiner 3s infinite step-start; */        }        
        
                        
加载中
        
    
    
    
            // var krpano = null;        embedpano({            swf: "{$Think.TBS_STATIC}/impression/vtour/tour.swf?v={$Think.CDNTIME}",            xml: "/3dpic/panoxml/{$cutNum}_{$codeVal}",            target: "pano",            html5: "auto",            mobilescale: 1.0,            passQueryParameters: true,        });        

修改相应的静态资源文件的路径以适应自己的项目，此时已经可以看到我们的全景图了。