krpano本地/离线使用

krpano代码基础

如今，很多浏览器对于在本地运行互动内容时会有诸多限制。“本地”意味着直接在浏览器中打开来自本地文件系统的html文件。在浏览器的地址栏中显示的是file:// 路径。

在尝试运行一个本地html文件时，浏览器可能会限制脚本去访问其他本地文件，因为这个原因，动态加载xml、js或图片可能无法成功。

解决方案

 

使用krpano测试服务器

krpano测试服务器是一个可在本地系统运行、通过 http:// 

或者https:// 地址提供对本地文件访问的应用程序。这样的话，对文件的访问和在网络服务器在线运行是一样的。

同时，在同一个本地网络（例如在同一个wifi下的移动设备）的其它系统和设备也可以通过本地服务器地址对文件进行访问。

krpano提供两种特殊且简便的方式来使用测试服务器。一个是图形界面另一个是命令行程序。详细请查看： krpano Testing Server

 

更改浏览器设置

可以通过更改浏览器设置来获取本地文件读取，但这将影响整个浏览器和全部页面，通常不推荐这种用法，仅限于测试。

  • Firefox

    Firefox 68之前：

    • 什么都不用做，默认情况下浏览器允许在html文件所在的同一个文件夹下对本地文件进行读取。

    Firefox 68之后版本：

    1. 浏览器地址栏中输入过 about:config 。
    2. 在配置页面的搜索栏中输入security.fileuri.strict_origin_policy 过滤可用设置。
    3. 将该设置更改为 false 。
    4. 之后，应该可以访问本地文件，不必重新启动浏览器。

  • Chrome

    Chrome浏览器需要一开始将 –allow-file-access-from-files  作为参数

    Windows上：

    1. 在某个位置创建一个新的快捷方式/链接图标到chrome（例如右击图标）。
    2. 编辑新链接的属性（也可以通过右键单击图标）。
    3. 在文件路径中添加 –allow-file-access-from-files  到Chrome.exe之后（确保两者之间为空）。
    4. 使用新图标来重启chrome（但在执行此操作之前，请确保关闭所有当前打开的chrome窗口）。

    Mac上：

    1. 关闭所有当前打开的chrome窗口。
    2. 打开Mac Terminal。
    3. 输入下面一行：

  • Safari (Mac)

    1. 在Safari设置中，启用“高级”选项卡中的“开发人员”菜单。
    2. 然后菜单栏中会有一个新的开发菜单。
    3. 启用“禁用本地文件限制”选项。

 

生成一个独立的桌面程序

像 NW.js 或者 Electron 可以生产独立的桌面程序来运行网络内容。尤其是安装简单的NW.js，因此下面是针对NW.js的简单使用说明：

Windows系统：

  1. 从 https://nwjs.io/ 下载NW.js。
  2. 解压到任意位置。
  3. 示范例子：使用MAKE VTOUR droplet生成漫游，复制vtour文件夹到之前解压的nwjs文件夹下。
  4. 在nwjs文件中新建一个名为package.json的文件（可使用任意文本编辑器），在文件内放入下面内容：
    这个文件会告诉NW.js在启动时要加载哪个文件。
  5. 然后点击nw.exe启动漫游。
  6. nw.exe文件也可以重命名为其它名字。

Mac系统：

  1. 从 https://nwjs.io/ 下载NW.js。
  2. 右键nwjs应用程序，显示其内容。
  3. 进入到Contents文件夹，然后进入Resources文件夹。
  4. 新建一个名为app.nw的文件夹。
  5. 示范例子：使用MAKE VTOUR droplet生成漫游，复制vtour文件夹到之前解压的app.nw文件夹下。
  6. 在app.nw文件中新建一个名为package.json的文件（可使用任意文本编辑器），在文件内放入下面内容：
    这个文件会告诉NW.js在启动时要加载哪个文件.
  7. 然后点击nwjs启动漫游。
  8. nwjs文件也可以重命名为其它名字。

 

将所有文件嵌入到html文件中

另一个非常特殊的绕过浏览器本地文件限制的方式是将所有文件嵌入到html文件自身中。也即是说将xml文件、插件js文件以及图形都放到一个html（非常大的）文件里。这仅在非常小的项目中是有意义的，不要尝试在多分辨率或者大项目中尝试。

从技术上讲，这可以通过使用DATA-Urls 和base64编码的文件来内联这些文件。krpano.js核心文件可以保留为一个外部文件（但也可以内联），并且可以直接将主xml文件本身添加到html文件中，而无需将base64编码作为脚本标记到html文件中。

下面是一个完整的html文件例子（没有真正的base64编码图片，因为太大了）：