摘要:为了实现全立体的全景图效果,我们采用了软件将普通鱼眼图片渲染为全景图说明代码有过调整,并不能保证运行,主要说明实现思路。显示全景图要将图片显示出来,我们必须按照规则生成必须的配置文件。我们将根据上传图片是生成的唯一码作为依据生成全景图。
为了实现全立体的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();
}
相应的视图文件中:
<span class="properties"><span class="hljs-meta">土拨鼠全景漫游图</span> <span class="hljs-string">- {$pageData.title}</span></span>
加载中
修改相应的静态资源文件的路径以适应自己的项目,此时已经可以看到我们的全景图了。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/31812.html
摘要:下载,我使用的版本是最新的解压下载文件,就是官方提供全景视频,将整个目录放入服务中,直接访问就可以预览了。 使用 krpano 制作全景视频 krpano的强大我就不多说了,了解过的人应该都知道,现在市场上只要应用全景的几乎都是使用的krp来实现,krp官方提供了插件,全景视频使用的是 videoplayer 插件,使用全景摄像机录制视频,在将他们播放到网页上,可以操作鼠标改变视角,也...
摘要:淘宝造物节的活动页就是全景的一个很赞的页面,它将全景图分割成等份,相邻的元素构成的夹角,相邻两侧面相对于棱柱中心所构成的夹角。 本文转自凹凸实验室:https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/remote/1460000011381045); 前言 3D 全景并不是什么新鲜事物了,但以前...
摘要:在定义时的方法中的第三个参数,实际上是文件中元素的内部呈现。但是除了元素的各种属性意外,还有几个特殊的属性和方法在定义时,其中一个接口中的第一个参数,是内部访问的直接媒介接口对象。数组中的元素也是继承与,并且额外提供了和属性。 krpano中有好多object,krpano Plugin Interface, krpano Plugin Object, krpano Base Obje...
摘要:注册陀螺仪传感器首先注册陀螺仪传感器根据具体需要自己设置灵敏度,当然越灵敏,越耗电。注册陀螺仪传感器,并设定传感器向应用中输出的时间间隔类型是微秒微秒最快。 简介 大家好我是张鹏辉(道长)人如其名,我是天桥上算命的,转发这条博文,接下来一个月会有意想不到的惊喜发生。最近微博上的全景图火了,所以决定实现一下。 工程里面图片资源来自网络,如有侵权请联系我,马上删除当然实现的方式很多比如Op...
阅读 896·2021-11-19 11:29
阅读 3388·2021-09-26 10:15
阅读 3101·2021-09-22 10:02
阅读 2479·2021-09-02 15:15
阅读 2003·2019-08-30 15:56
阅读 2462·2019-08-30 15:54
阅读 2992·2019-08-29 16:59
阅读 671·2019-08-29 16:20