文章目录

简述

Z截图插件用于在全景中截图，可以获取和保存支持跨浏览器的屏幕截图。
通过简单的 onclick 动作添加截图功能。

与浏览器窗口无关，可自定义分辨率和宽高比。
高分辨率截图（使用krpano 1.20.1或更高版本）
用图像或文字为截图添加水印！
不需要依赖其他组件（如jquery或其他脚本）
非常简单易用！

案例

使用方法

<plugin name="zsnapshot"
	url="zsnapshot.js"
	preload="true"
	keep="true"
	minres="512"
	maxres="2048"
	aspect="4/3"
	aspectrotate="true"
	watermark=""
	forcemark=""
        />

<plugin name="zsnapshot"

url="zsnapshot.js"

preload="true"

keep="true"

minres="512"

maxres="2048"

aspect="4/3"

aspectrotate="true"

watermark=""

forcemark=""

将zsnapshot.js放到项目文件夹
在html (index/tour.html) 中确保嵌入krpano的设置为 html5:”only+webgl”

XHTML

embedpano({ html5:"only+webgl", ... });

1

embedpano({ html5:"only+webgl", ... });
在主xml (tour.xml) 中添加

XHTML

<plugin name="zsnapshot" url="zsnapshot.js" keep="true" />

1

<plugin name="zsnapshot" url="zsnapshot.js" keep="true" />
在任意动作中可加入下面一行代码实现截图 …

XHTML

<action name="screenshot"> take_snapshot(screenshot,null,null,false,jpg,0.85); </action>

1
2
3

<action name="screenshot">
take_snapshot(screenshot,null,null,false,jpg,0.85);
</action>
或者从javascript中实现 …

XHTML

<action name="screenshot" type="javascript"> krpano.actions.take_snapshot("screenshot",null,null,false,"jpg",0.85); </action>

1
2
3

<action name="screenshot" type="javascript">
krpano.actions.take_snapshot("screenshot",null,null,false,"jpg",0.85);
</action>
或者在layer的onclick动作中添加 …

XHTML

<layer name="screenshot" keep="true" url="screenshot_icon.png" width="32" height="32" onclick="take_snapshot(screenshot,null,null,true,png);" </layer>

1
2
3
4

<layer name="screenshot" keep="true"
url="screenshot_icon.png" width="32" height="32"
onclick="take_snapshot(screenshot,null,null,true,png);"
</layer>

插件动作

take_snapshot(filename, *width, *height, *hotspots, *type, *quality)

1	take_snapshot(filename, width, height, hotspots, type, *quality)

截图并按照指定的文件名保存。

参数:

filename 文件名不需要带后缀
width 保存图像的宽度以像素为单位 (默认与stagewidth一致)
height 保存图像的高度以像素为单位 (默认与stageheight一致)
hotspots=true 的话可以渲染(WebGL) 热点 (默认值为false)
type 保存的文件名类型: jpeg 或 png (默认值为 jpeg)
quality jpg图像质量: 从0到1 (默认值为 0.85)

注意事项:

take_snapshot() 动作生成截图自动触发下载
minres, maxres, aspect, aspectrotate 和 watermark 是全局插件属性
水印内容由热点定义

插件属性

ready (只读)	Boolean	true \| false
属性名	类型	值
version (只读)	String	插件版本号
url	String	zsnapshot.js
preload	Boolean	true
keep	Boolean	true
如果插件加载并准备好应用时，ready为true version记录插件版本号。 url必须指向插件。 preload设置为 true 在绝大多数情况下，keep设置为true，
属性名	类型	默认值	最小值	最大值
minres	Number	512	256	4096
maxres	Number	2048	256	4096
aspect	Number		0.25	4.0
aspectrotate	Boolean	true
watermark	String
forcemark	Boolean	false
minres 以及 maxres 用于限制分辨率将宽高比限制到指定的比例可以使用数字或简单的表达式，例如4/3、16/9等、如果aspect未被定义，则使用当前屏幕的宽高比。 aspectrotate 根据屏幕调整为图片为横屏或者竖屏。水印所使用的热点的名字如果水印由于某种原因失败，forcemark将让截图无法下载

水印使用

图像使用:

使用keep=”true” visible=”false” enabled=”false” 让热点保持不可见。
使用下面属性定义水印: url, alpha, width, height, align, x 以及 y

<hotpspot name="mylogo"
    keep="true" visible="false" enabled="false"
    type="image" url="mylogo.png" alpha="1"
    width="200" height="prop"
    align="bottomright" x="25" y="25" />

<hotpspot name="mylogo"

keep="true" visible="false" enabled="false"

type="image" url="mylogo.png" alpha="1"

width="200" height="prop"

align="bottomright" x="25" y="25" />

文字水印:

使用keep=”true” visible=”false” enabled=”false” 让热点保持不可见。
定义水印的属性: text, css, alpha, bg, align, x 以及 y
仅支持简单的CSS。
renderer=”webgl” 必须使用。

<hotpspot name="mytext"
    keep="true" visible="false" enabled="false"
    type="text" bg="false" alpha="1"
    html="[b]hello world[/b]" css="font-size:24px;color:#fff;"
    align="bottomright" x="25" y="25" />

<hotpspot name="mytext"

keep="true" visible="false" enabled="false"

type="text" bg="false" alpha="1"

html="[b]hello world[/b]" css="font-size:24px;color:#fff;"

align="bottomright" x="25" y="25" />

适配性

使用krpano 1.20.1或更新版本，仅限html5+webgl！（不支持Flash）
可捕获全景图和热点（需要将热点的renderer设置为webgl）
无法捕获layer
iOS不支持将屏幕截图直接保存到其图片库中。
你仍然可以截屏到一个新的选项卡中，但随着这一过程的结束，
iOS设备通常禁用屏幕截图功能。