ThinkPHP3.2+Krpano實現全景圖

My_Oh_My 發布于2019-07-01 14:06 / 1302人閱讀

摘要：為了實現全立體的全景圖效果，我們采用了軟件將普通魚眼圖片渲染為全景圖說明代碼有過調整，并不能保證運行，主要說明實現思路。顯示全景圖要將圖片顯示出來，我們必須按照規則生成必須的配置文件。我們將根據上傳圖片是生成的唯一碼作為依據生成全景圖。

為了實現全立體的3D全景圖效果，我們采用了Krpano軟件將普通魚眼圖片渲染為720°全景圖

說明：代碼有過調整，并不能保證運行，主要說明實現思路。
首先下載軟件Krpano全景圖生成軟件，提取碼z2zu，其中包含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
" | "; 
    }
    
    $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}
    
    
    
    
    
    
    
    



    
        
            
            加載中

修改相應的靜態資源文件的路徑以適應自己的項目，此時已經可以看到我們的全景圖了。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/31812.html

使用 krpano 實現全景視頻

摘要：下載，我使用的版本是最新的解壓下載文件，就是官方提供全景視頻，將整個目錄放入服務中，直接訪問就可以預覽了。使用 krpano 制作全景視頻 krpano的強大我就不多說了，了解過的人應該都知道，現在市場上只要應用全景的幾乎都是使用的krp來實現，krp官方提供了插件，全景視頻使用的是 videoplayer 插件，使用全景攝像機錄制視頻，在將他們播放到網頁上，可以操作鼠標改變視角，也...

陸斌 2019-08-19 18:38 評論0 收藏0
CSS 3D Panorama（全景） - 淘寶造物節技術剖析

摘要：淘寶造物節的活動頁就是全景的一個很贊的頁面，它將全景圖分割成等份，相鄰的元素構成的夾角，相鄰兩側面相對于棱柱中心所構成的夾角。本文轉自凹凸實驗室：https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/remote/1460000011381045); 前言 3D 全景并不是什么新鮮事物了，但以前...

LiuRhoRamen 2019-08-29 11:16 評論0 收藏0
krpano各種Objects

摘要：在定義時的方法中的第三個參數，實際上是文件中元素的內部呈現。但是除了元素的各種屬性意外，還有幾個特殊的屬性和方法在定義時，其中一個接口中的第一個參數，是內部訪問的直接媒介接口對象。數組中的元素也是繼承與，并且額外提供了和屬性。 krpano中有好多object，krpano Plugin Interface, krpano Plugin Object, krpano Base Obje...

n7then 2019-08-21 14:08 評論0 收藏0
Android三種姿勢帶你玩轉360度全景圖功能

摘要：注冊陀螺儀傳感器首先注冊陀螺儀傳感器根據具體需要自己設置靈敏度，當然越靈敏，越耗電。注冊陀螺儀傳感器，并設定傳感器向應用中輸出的時間間隔類型是微秒微秒最快。簡介大家好我是張鵬輝（道長）人如其名，我是天橋上算命的，轉發這條博文，接下來一個月會有意想不到的驚喜發生。最近微博上的全景圖火了，所以決定實現一下。工程里面圖片資源來自網絡，如有侵權請聯系我，馬上刪除當然實現的方式很多比如Op...

seal_de 2019-08-16 10:42 評論0 收藏0

發表評論

登陸后可評論

0條評論

My_Oh_My

男|高級講師

我要關注我要私信

TA的文章

搬瓦工：$84/年洛杉磯CN2 GIA、日本軟銀、荷蘭AS9929線路補貨

閱讀 853·2021-11-19 11:29
Advin Servers：$3.99/月/1核@AMD Ryzen 9 5900X/4GB內存/6

閱讀 3347·2021-09-26 10:15
python爬取某趣閣小說（2.0），十分鐘爬完一千六百章

閱讀 2854·2021-09-22 10:02
C語言指針這一篇夠了（一萬二千字，包含指針與數組，函數指針等詳解）

閱讀 2431·2021-09-02 15:15
vertical-align

閱讀 1970·2019-08-30 15:56
微信小程序改變 button disabled 樣式

閱讀 2407·2019-08-30 15:54
【HEXO】從零搭建HEXO博客修改默認主題/參數/favicon 替換個人主頁

閱讀 2903·2019-08-29 16:59
在React中跨組件分發狀態的三種方法

閱讀 634·2019-08-29 16:20

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

ThinkPHP3.2+Krpano實現全景圖

相關文章

**使用 krpano 實現全景視頻**

CSS 3D Panorama（全景） - 淘寶造物節技術剖析

krpano各種Objects

Android三種姿勢帶你玩轉360度全景圖功能

發表評論

0條評論

My_Oh_My

男|高級講師

TA的文章

搬瓦工：$84/年洛杉磯CN2 GIA、日本軟銀、荷蘭AS9929線路補貨

Advin Servers：$3.99/月/1核@AMD Ryzen 9 5900X/4GB內存/6

python爬取某趣閣小說（2.0），十分鐘爬完一千六百章

C語言指針這一篇夠了（一萬二千字，包含指針與數組，函數指針等詳解）

vertical-align

微信小程序改變 button disabled 樣式

【HEXO】從零搭建HEXO博客修改默認主題/參數/favicon 替換個人主頁

在React中跨組件分發狀態的三種方法

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

ThinkPHP3.2+Krpano實現全景圖

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！