使用ThinkPHP+Krpano实现全景图的方法

这篇文章主要为大家展示了使用ThinkPHP+Krpano实现全景图的方法，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“使用ThinkPHP+Krpano实现全景图的方法”这篇文章吧。

成都创新互联专注于盐津企业网站建设,响应式网站设计,商城网站定制开发。盐津网站建设公司,为盐津等地区提供建站服务。全流程按需网站建设，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

thinkphp是什么

thinkphp属于一种免费的开发框架，能够用于开发前端网页，最早thinkphp是为了简化开发而产生的，thinkphp同时也是遵循Apache2协议，最初是从Struts演变过来，也把国外一些好的框架模式进行利用，使用面向对象的开发结构，兼容了很多标签库等模式，它能够更方便和快捷的开发和部署应用，当然不仅仅是企业级应用，任何php应用开发都可以从thinkphp的简单、兼容和快速的特性中受益。

ThinkPHP3.2+Krpano实现全景图

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

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

上传图片并生成全景图

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

在开始上传图片前，需要修改Krpano的配置文件Krpano/templates/normal.config如下：

# krpano 1.19

# 引入基本设置
include basicsettings.config
# 全景图类型 自动 如果可以识别自动，不能识别图片会询问处理方法
panotype=autodetect
hfov=360

# 输出设置
flash=true
html5=true

# convert spherical/cylindrical to cubical
converttocube=true
converttocubelimit=360x45

# multiresolution settings
multires=true
maxsize=8000
maxcubesize=2048

# 输出图片路径
tilepath=%INPUTPATH%/pano/%BASENAME%.tbs-pano/3d-pano-[c].jpg

# 输出预览图图片设置
preview=true
graypreview=false
previewsmooth=25
previewpath=%INPUTPATH%/pano/%BASENAME%.tbs-pano/3d-pano-preview.jpg

# 输出缩略图图片设置
makethumb=true
thumbsize=240
thumbpath=%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;$i<$length;$i++){
        $str.=$strPol[rand(0,$max)];//rand($min,$max)生成介于min和max两个数之间的一个随机整数
    }
    
    //$md5Code 会做为文件夹的名字 跟文件的名字，要保持唯一性
    $md5Code =md5_16bit(hash("sha256",$u_name.time().$rand_char)).$str;
    $datePath =date("Y-m-d",time());

    $root_path ='./upload_3dpic/';
    $url_path ='/upload_3dpic/';    //外部访问url
    $f_up_to_path =$root_path .'/'. $datePath.'/'.$md5Code;
    if(!file_exists($f_up_to_path)){
        mkdir($f_up_to_path, 0777, true);
    }
    $type = strtolower(substr($u_name, strrpos($u_name, '.') + 1));
    $img_file_name =$md5Code."." . $type;

    $saveFileName = $f_up_to_path."." . $type;
    $true_img_url =$url_path . $datePath.'/'.$md5Code."." . $type; //外部访问链接
    if (!move_uploaded_file($u_temp_name, $saveFileName)) {
        $this->ajaxReturn(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规则生成必须的xml配置文件。

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

// 解析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 "
            
             

            
            

            
            
    
            
        
                
        
                
        
                
                    
                
            
            

            
                
            

        ";
    }

其中scene并不会当前的效果图渲染出来，而是在我们在多张全景图之间进行选择的时候通过DOM.call("toggle_item_hotspots();");自动触发。

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

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();
}

相应的视图文件中：




    土拨鼠全景漫游图 - {$pageData.title}
    
    
    
    
    
    
    
    



    
        
            
            加载中

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

以上就是关于“使用ThinkPHP+Krpano实现全景图的方法”的内容，如果改文章对你有所帮助并觉得写得不错，劳请分享给你的好友一起学习新知识，若想了解更多相关知识内容，请多多关注创新互联行业资讯频道。

文章名称：使用ThinkPHP+Krpano实现全景图的方法
链接地址：http://abwzjs.com/article/jegeij.html

使用ThinkPHP+Krpano实现全景图的方法

thinkphp是什么

显示全景图

其他资讯