krp的急速预览

<!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>
    <!-- <div style="display: none;" ><img id="Img1" src="1.jpg"></div> -->
<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 : "tour3.xml",
                localfallback : "none",
                target : "pano",
                consolelog : true,                  // 将krpano 跟踪信息也写入到浏览器信息窗口中
                passQueryParameters : true,         // 将路径参数传递到krpano
                onready : krpano_onready_callback
              });
      function LoadShow(){

            console.log(1);
        }
    // 当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));");
    }
 
     
     window.onload=function(){
       var krpano = document.getElementById("krpanoSWFObject");
       var img = "1.jpg";
         var xmlstring = '<krpano>'+
                                '<image>'+
                                    '<sphere url="'+img+'" />'+
                                '</image>'+
                            
                            '</krpano>';
 
            krpano.call("loadxml(" + escape(xmlstring) + ", null, MERGE, BLEND(0.5));");
            
           //   krpano.call("loadscene(" + escape(xmlstring) + ", null, MERGE, BLEND(0.5));");

}
    function handleReaderLoadEnd(e)
    {
        //var data = {};
       // var imageurl =
        var imageurl = e.target.result;
     //   var img = document.getElementById("Img1");
       // var imgfile = img.files;
        // loadxmlstring(imgfile);
        loadxmlstring(imageurl);
    }
 
    function handleDragOver(evt)
    {
        //阻止事件(取消其默认行为并阻止其传播)
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy';
    }
     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 loadxmlstring(img)
    {
        if (krpano)
        {
            var xmlstring = '<krpano>'+
                                '<image>'+
                                    '<sphere url="'+img+'" />'+
                                '</image>'+
                                '<layer name="myTest" type="text" align="top" html="3D场景观看给你置身其中的感觉" 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>
猜你喜欢
