<!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>文章来源: krp的急速预览