VR图片漫游-兼容处理图片跨域问题

一.图片跨域问题

nginx代理后仍出现图片跨域问题，先检查nginx是否运行

图片路径是否为nginx代理路径？

图片路径是否与代理路径重复？若重复可split重新传入路径

file = '/sdck' + file.split('/sdck')[1];

二.vr图片漫游

var div = document.getElementById('container');var PSV = new PhotoSphereViewer({panorama: '你的图片路径',container: div,time_anim: 3000,navbar: true,usexmpdata: false});

三.完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Photo Sphere Viewer</title><meta name="viewport" content="initial-scale=1.0" /><script src="../../modules/VR/three.min.js"></script><script src="../../modules/VR/photo-sphere-viewer.js"></script><style>html, body {margin: 0;width: 100%;height: 100%;overflow: hidden;}.web-top{width: 100%;height: 100%;margin: 0;padding:0;overflow: hidden;background: rgba(0,80,161,0.8);}#container {width: 100%;height: 100%;}.closeBox{width: 100%;height: 50px;display: flex;align-items: center;justify-content: flex-end;}.closeImg{width: 30px;height: 30px;line-height: 30px;border-radius: 50%;margin-right: 20px;color: #ffffff;text-align: center;cursor: pointer;font-size: 25px;}</style>
</head><body>
<div class="web-top"><div class="closeBox"><div class="closeImg" onclick="closeImg()">×</div></div><div id="container"></div><canvas id="load_area" width="100%" height="224px"></canvas>
</div>
<script src="../../modules/jquery.min.js"></script>
<script>function closeImg() {//关掉当前页面}
</script>
<script>var file = data.src;//后台获取vr图片路径file = 'nginx代理路径关键词' + file.split('nginx代理路径关键词')[1];//如http://192.135.10.89/sdck/xxx.jpg;nginx代理关键字/sdck，则可以将关键字/sdck替换‘’里边文字var reader = new FileReader();var xhr = new XMLHttpRequest();xhr.open("get", file, true);xhr.responseType = "blob";xhr.onload = function() {if (this.status == 200) {reader.readAsDataURL(this.response);}}xhr.send();reader.onload = function(){var  imgSrc = this.result;var div = document.getElementById('container');var PSV = new PhotoSphereViewer({panorama: imgSrc,container: div,time_anim: 3000,navbar: true,usexmpdata: false});}</script>
</body></html>

四.示例

五.需要引入两个vr的js代码块引入太大不支持需要的可私信我或者去我的资源里下载

https://download.csdn.net/download/henghahouhei/87433411

VR图片漫游-兼容处理图片跨域问题相关推荐

ie9以下兼容ajax跨域访问，解决ie9以下浏览器ajax请求报error拒绝访问方案解决ie9以下浏览器ajax请求报400问题方案
解决方案如下: 1.ie9以下兼容ajax跨域访问 2.ajax请求开始前添加 jQuery.support.cors = true; 允许跨域 3.ie浏览器设置允许通过域访问数据并且 ur ...
meta标签no-referrer处理图片跨域和百度统计失效问题
meta标签no-referrer处理图片跨域 <meta name="referrer" content="no-referrer"/> 不过这时 ...
php图片上传怎么跨域,ajax跨域上传图片（后端php）完整例子
1.html内容: 上传截图: 成功文件: 2.js代码: function uploadImage(){ //获取图片 var file = $('#uploadFile')[0].files[0] ...
html2canvas解决图片空白，网络图片跨域
解决思路:前端将网络图片转换成64位格式不需要设置什么阿里云服务器跨域,nginx配置header等等 1.准备一个canvas标签用于转换64位格式图片 <canvas ref=" ...
前端常见问题——Canvas 图片跨域
尽管不通过 CORS 就可以在 Canvas 画布中使用图片,但是这会污染画布.一旦画布被污染,你就无法读取其数据.例如,你不能再使用画布的 toBlob(), toDataURL() 或 getIm ...
php把网络图片转化为base64格式，解决html2canvas图片跨域问题
一.前言最近在用html2canvas做网页截图功能.这个开源库使用很简单,代码也很方便,但难点在于跨域问题.比如说,我的一个页面中有图片也有文字,图片是来自于图片服务器的网络图片.此时我们要生成截 ...
vue-cropper图片裁剪网络图片展示时跨域
在使用vue-cropper时,展示图片的时候出现跨域报错如下: vue-cropper空白解决方法: 将网络图片转为base64 // 将网络图片转换成base64格式transBase64Fr ...
svg转成jpg/png图片跨域图片
svg转成jpg/png图片,svg含跨域图片基本思路: svg: svg效果: 转成jpg/png: base64串显示效果由于svg上含有跨域图片,图片没显示出来,所以最终处理结果: 解决跨域 ...
nginx配置图片跨域访问
在server段中添加红框内的图片跨域内容参数 location ~* .*.(gif|jpg|jpeg|png|bmp|swf)$ { add_header Access-Control-Allo ...

VR图片漫游-兼容处理图片跨域问题

VR图片漫游-兼容处理图片跨域问题相关推荐

最新文章

热门文章