photo-sphere-viewer.js中loadXMP()方法导致360全景图无法正常显示问题

最新推荐文章于 2024-07-02 08:43:40 发布

capefool

最新推荐文章于 2024-07-02 08:43:40 发布

阅读量1.4k

点赞数

分类专栏： plugin of js 文章标签： threeJs photo-sphere-viewer 360全景图

本文链接：https://blog.csdn.net/qq_27384051/article/details/85321378

版权

plugin of js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

@基于threeJs的360全景图插件photo-sphere-viewer

loadXMP()返回的图片结构体不一致导致canvas画布图片不显示

loadXMP返回中data结构（因为更改过photo-sphere-viewer源码，大家可以通过直接搜索方法名定位code所在）

1.返回这种格式能用photo-sphere-viewer中getAttribute()方法解析拿到对应图片属性值；（一般从网上download下的360全景图似没有问题）如下代码
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="XMP Core 4.4.0-Exiv2"> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:GPano="http://ns.google.com/photos/1.0/panorama/" GPano:UsePanoramaViewer="True" GPano:CaptureSoftware="Insta360" GPano:StitchingSoftware="Insta360 Air" GPano:ProjectionType="equirectangular" GPano:CroppedAreaImageWidthPixels="6080" GPano:CroppedAreaImageHeightPixels="3040" GPano:FullPanoWidthPixels="6080" GPano:FullPanoHeightPixels="3040" GPano:CroppedAreaLeftPixels="0" GPano:CroppedAreaTopPixels="0" GPano:SourceImageCreateTime="2018:12:18 17:56:33"/> </rdf:RDF>
2.实际项目中使用的是360全景相机通过app上传；（不知道是否受设备影响）loadXMP（）中拿到data如下：

<x:xmpmeta xmlns:x="adobe:ns:meta/" xmptk="SM-C200">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about="" xmlns:GPano="http://ns.google.com/photos/1.0/panorama/"><GPano:ProjectionType>equirectangular</GPano:ProjectionType><GPano:CaptureSoftware>Samsung Gear 360 Manager 1.0.0</GPano:CaptureSoftware><GPano:StitchingSoftware>Samsung Gear 360 Manager 1.0.0</GPano:StitchingSoftware><GPano:UsePanoramaViewer>True</GPano:UsePanoramaViewer><GPano:CroppedAreaImageWidthPixels>7200</GPano:CroppedAreaImageWidthPixels><GPano:CroppedAreaImageHeightPixels>3600</GPano:CroppedAreaImageHeightPixels><GPano:FullPanoWidthPixels>7200</GPano:FullPanoWidthPixels><GPano:FullPanoHeightPixels>3600</GPano:FullPanoHeightPixels><GPano:CroppedAreaLeftPixels>0</GPano:CroppedAreaLeftPixels><GPano:CroppedAreaTopPixels>0</GPano:CroppedAreaTopPixels><GPano:PoseHeadingDegrees>0.000000</GPano:PoseHeadingDegrees><GPano:PosePitchDegrees>-2.700000</GPano:PosePitchDegrees><GPano:PoseRollDegrees>0.500000</GPano:PoseRollDegrees></rdf:Description></rdf:RDF>

第二种情况下通过插件提供的getAttribute（）方法将返回一个无效的属性值；
源码如下

/**
	 * Returns the value of a given attribute in the panorama metadata.
	 * @private
	 * @param {string} data - The panorama metadata
	 * @param {string} attr - The wanted attribute
	 * @return {string} The value of the attribute
	 **/
	var getAttribute = function(data, attr) {
		var a = data.indexOf('GPano:' + attr) + attr.length + 8, b = data.indexOf('"', a);
		return data.substring(a, b);
	};

更改getAttribute()方法为
var getAttribute = function(data, attr) { var a = data.indexOf('GPano:' + attr) + attr.length + 8, b = data.indexOf('"', a); if(a*1>b*1){ a=data.indexOf('<GPano:' + attr) + attr.length+8; b=data.indexOf('</GPano:'+attr) } return data.substring(a, b); };
这样即可正常预览图片；