文章目录

演示

将全景图拖放到浏览器窗口中，查看全景效果

源代码

<!DOCTYPE html>
<html>
<head>
    <title>Pano Viewer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <style>
        @-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; }
    </style>
</head>
<body>

<script src="krpano.js"></script>

<div id="pano" style="width:100%;height:100%;">
    <noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
</div>

<script>
    // krpano的全局接口 (在onready调用中设置)
    var krpano = null;

    // 将 krpano viewer 嵌入 'pano' div 元素中
    embedpano({ swf : null,                         // flash viewer 的路径(如果不需要flash viewer则写null)
                id : "krpanoSWFObject",
                xml : null,
                localfallback : "none",
                target : "pano",
                consolelog : true,                  // 将krpano 跟踪信息也写入到浏览器信息窗口中
                passQueryParameters : true,         // 将路径参数传递到krpano
                onready : krpano_onready_callback
              });

    // 当krpano嵌入后可使用时执行的函数
    function krpano_onready_callback(krpano_interface)
    {
        krpano = krpano_interface;
        var loadXML = '<krpano><layer name="myTest" type="text" align="center" html="拖全景图到窗口中浏览" css="font-family:Arial; font-size:42px;" /></krpano>';
        krpano.call("loadxml(" + escape(loadXML) + ", null, MERGE, BLEND(0.5));");
    }

    function handleFileSelect(evt)
    {
        evt.stopPropagation();
        evt.preventDefault();

        var files = evt.dataTransfer.files; // FileList object
        
        // 对文件列表进行循环
        for (var i = 0, f; f = files[i]; i++)
        {
            // 仅处理图片文件
            if (!f.type.match('image.*'))
                continue;

            var reader = new FileReader();
            
            // 读取图像文件
            reader.onloadend = handleReaderLoadEnd;
            reader.readAsDataURL(f);
        }
    }

    function handleReaderLoadEnd(e)
    {
        var imageurl = e.target.result;
        loadxmlstring(imageurl);
    }

    function handleDragOver(evt)
    {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy';
    }

    function loadxmlstring(img)
    {
        if (krpano)
        {
            var xmlstring = '<krpano>'+
                                '<image>'+
                                    '<sphere url="'+img+'" />'+
                                '</image>'+
                                '<layer name="myTest" type="text" align="top" html="拖全景图到窗口中浏览.." css="font-family:Arial; font-size:20px;" />'+
                            '</krpano>';

            krpano.call("loadxml(" + escape(xmlstring) + ", null, MERGE, BLEND(0.5));");
        }
    }

    // 设置拖拽图片监听
    var dropZone = document.getElementById('pano');
    dropZone.addEventListener('dragover', handleDragOver, false);
    dropZone.addEventListener('drop', handleFileSelect, false);

</script>
</body>
</html>

100

101

102

103

104

105

<!DOCTYPE html>

<html>

<head>

<title>Pano Viewer</title>

<style>

@-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; }

</style>

</head>

<body>

</div>

// krpano的全局接口 (在onready调用中设置)

var krpano = null;

// 将 krpano viewer 嵌入 'pano' div 元素中

embedpano({ swf : null, // flash viewer 的路径(如果不需要flash viewer则写null)

id : "krpanoSWFObject",

xml : null,

localfallback : "none",

target : "pano",

consolelog : true, // 将krpano 跟踪信息也写入到浏览器信息窗口中

passQueryParameters : true, // 将路径参数传递到krpano

onready : krpano_onready_callback

});

// 当krpano嵌入后可使用时执行的函数

function krpano_onready_callback(krpano_interface)

{

krpano = krpano_interface;

var loadXML = '<krpano><layer name="myTest" type="text" align="center" html="拖全景图到窗口中浏览" css="font-family:Arial; font-size:42px;" /></krpano>';

krpano.call("loadxml(" + escape(loadXML) + ", null, MERGE, BLEND(0.5));");

}

function handleFileSelect(evt)

{

evt.stopPropagation();

evt.preventDefault();

var files = evt.dataTransfer.files; // FileList object

// 对文件列表进行循环

for (var i = 0, f; f = files[i]; i++)

{

// 仅处理图片文件

if (!f.type.match('image.*'))

continue;

var reader = new FileReader();

// 读取图像文件

reader.onloadend = handleReaderLoadEnd;

reader.readAsDataURL(f);

}

function handleReaderLoadEnd(e)

{

var imageurl = e.target.result;

loadxmlstring(imageurl);

}

function handleDragOver(evt)

{

evt.stopPropagation();

evt.preventDefault();

evt.dataTransfer.dropEffect = 'copy';

}

function loadxmlstring(img)

{

if (krpano)

{

var xmlstring = '<krpano>'+

'<image>'+

'<sphere url="'+img+'" />'+

'</image>'+

'<layer name="myTest" type="text" align="top" html="拖全景图到窗口中浏览.." css="font-family:Arial; font-size:20px;" />'+

'</krpano>';

krpano.call("loadxml(" + escape(xmlstring) + ", null, MERGE, BLEND(0.5));");

}

// 设置拖拽图片监听

var dropZone = document.getElementById('pano');

dropZone.addEventListener('dragover', handleDragOver, false);

dropZone.addEventListener('drop', handleFileSelect, false);

</script>

</body>

</html>

下载

点击下载

方法二

以下隐藏内容只提供VIP赞助会员，VIP会员说明请查看置顶文章

方法二案例下载

以下隐藏内容只提供VIP赞助会员，VIP会员说明请查看置顶文章