Panorama Community

Zitat

<krpano>

<!-- the skin -->
<include url="skin/defaultskin.xml" />



<style name="button" type="text"
css="text-align:center;"
padding="4 8"
mergedalpha="false"
bgborder="4 0xFFFFFF 1"
bgroundedge="1"
bgshadow="0 1 4 0x000000 1.0"
onover="set(bgcolor, 0xC7E4FC);"
onout="calc(bgcolor, pressed ? 0x90CAF9 : 0xFFFFFF);"
ondown="set(bgcolor, 0x90CAF9);"
onup="calc(bgcolor, hovering ? 0xC7E4FC : 0xFFFFFF);"
/>


<layer name="makescreenshot" keep="true" style="button" align="top" x="0" y="40" padding="4 8"
html="Make Screenshot"
onclick="makescreenshot();"
/>


<action name="makescreenshot_init" type="Javascript" autorun="onstart"><![CDATA[

// Load the FileSaver.js script for saving files locally cross browser.
// Source: https://github.com/eligrey/FileSaver.js/
krpano.loadFile("%CURRENTXML%/FileSaver.js", function(file)
{
eval(file.data.replace("export ",""));
krpano.screenshotSaveAs = saveAs;
});


// count the screenshots (for the filenames)
krpano.makescreenshot_count = 1;


// add a 'makescreenshot' action to krpano
krpano.makescreenshot = function()
{
// if there is already a screenshot layer, remove it now
krpano.call("removelayer(screenshot,true)");

// create an empty Object as makeScreenshot cache
krpano.makeScreenshotCache = {};

// make a screenshot as canvas
var sizeinfo = {w:0, h:0};
var screenshotcanvas = krpano.webGL.makeScreenshot(0, 0, true, "canvas", 0, null, sizeinfo, krpano.makeScreenshotCache);

if (screenshotcanvas)
{
// example - draw something on the canvas
if (0)
{
var ctx = screenshotcanvas.getContext("2d");
ctx.font = "25px Times";
ctx.fillStyle = "#FFFFFF";
ctx.fillText("krpano makeScreenshot() API Test", 50, screenshotcanvas.height-50);
}

// add some krpano layers that show the screenshot and allow saving it
var container = krpano.addlayer("screenshot");
container.type = "container";
container.align="center";
container.registercontentsize(sizeinfo.w+20, sizeinfo.h+20);
container.width = sizeinfo.w > sizeinfo.h ? "70%" : "prop";
container.height = sizeinfo.w > sizeinfo.h ? "prop" : "70%";
container.bgcolor = 0xFFFFFF;
container.bgalpha = 1.0;
container.bgshadow = "0 5 40 0x000000 1.0";
container.bgroundedge = 3;
container.bgcapture = true;
container.zorder = 99;
container.onclick = "set(enabled,false);tween(alpha,0,0.2,default,removelayer(get(name),true));";
container.onover = "tween(layer[screenshotsaveasbutton].alpha,1,0.2)";
container.onout = "tween(layer[screenshotsaveasbutton].alpha,0,0.2)";

var image = krpano.addlayer("screenshotimage");
image.url = screenshotcanvas.toDataURL();
image.parent = "screenshot";
image.align = "center";
image.width = -20;
image.height = -20;
image.zorder = 1;
image.enabled = false;

// saving screenshots will be only possible when Blob and canvas.toBlob is supported by the browser (for more browser support add polyfills)
if (screenshotcanvas.toBlob)
{
var saveasbutton = krpano.addlayer("screenshotsaveasbutton");
saveasbutton.loadstyle("button");
saveasbutton.parent = "screenshot";
saveasbutton.align = "bottom";
saveasbutton.y = 25;
saveasbutton.zorder = 2;
saveasbutton.autoalpha = true;
saveasbutton.alpha = 0;
saveasbutton.html = "Save Image";
saveasbutton.onclick = function()
{
// save as JPEG with 92% quality
screenshotcanvas.toBlob(function(blob){ krpano.screenshotSaveAs(blob,"screenshot" + (krpano.makescreenshot_count++) + ".jpg"); }, "image/jpeg", 0.92);
};
}
}
}

]]></action>

<!-- view settings -->
<view hlookat="0" vlookat="0" maxpixelzoom="1.0" fovmax="150" limitview="auto" />


<preview url="test.tiles/preview.jpg" />

<image type="CUBE" multires="true" tilesize="512">
<level tiledimagewidth="5184" tiledimageheight="5184">
<cube url="test.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="2624" tiledimageheight="2624">
<cube url="test.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="1280" tiledimageheight="1280">
<cube url="test.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="640" tiledimageheight="640">
<cube url="test.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
</level>
</image>

</krpano>