Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

renatosilva94

Fotos 360 com o Path vindo do BD

Por , em Javascript

Recommended Posts

renatosilva94    1

renatosilva94
Postado

Bom, seguinte galera, estou conseguindo postar fotos normalmente com um código que fiz, porém essas fotos precisam ser renderizadas por um código javascript que é a photo sphere view (fotos 360) e não estou conseguindo fazer o javascript pegar e reconhecer essas fotos, alguém pode dar uma força?

 

código onde as fotos 360 são exibidas

 

 

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Fotos</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script src="three.min.js"></script>
<script src="photo-sphere-viewer.js"></script>
<script src="funcao.js"></script>
</head>
<body>
<?php
include 'Classes/verificaLogin.php'
?>
<div class="site">
<?php
include ('fixos/menuSup.php');
?>
<div class="armacao">
<?php
include ('fixos/menuEsq.php')
?>
<div class="capaUsuario">
<?php
include 'fixos/fotoUsuario.php';
?>
<div class="miniMenu">
<?php
include 'Classes/DAL/EmpresaDAL.php';
$objDAL = new EmpresaDAL();
$sql = $objDAL->sobreEmpresa($_GET['id']);
$linha = mysqli_fetch_array($sql);
include 'fixos/menuEmpresas.php';
?>
<div class="sobreEmpresa">
<div class="conteudo">
<div class="foto360">
<!--<div id="container"></div>
<p style="text-align: center;">
<a href="#" id="go"></a>
</p>
<div id="your-pano"></div>
<form method="POST" action="example1.html">
<p style="text-align: center;">
<input type="file" name="pano" id="pano" />
</p>
</form> -->
<?php if($_SESSION['id'] == $_GET['id']){ ?>
<form action="Classes/uploadFoto360.php" method="POST" enctype="multipart/form-data" name="addFoto360">
<input type="file" name="Foto360" id="Foto360">
<br>
<input type="submit" value="Enviar" name="Enviar">
</form>
<?php } ?>
<?php
$idusuario = $_GET['id'];
include_once 'Classes/DAL/FotoDAL.php';
$objDAL = new FotoDal();
$foto360 = mysqli_fetch_array($objDAL->mostraFoto360($idusuario));{
?>
<div name="mostraFoto360" id="mostraFoto360" style="width: 100%; height: 500px;">
<a href="Fotos/Fotos360/<?php echo $idusuario . '/' . $foto360['link'];?>">
<img src="Fotos/Fotos360/<?php echo $idusuario . '/' . $foto360['link'];?>" width="100px" id="pano"></a>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
include ('fixos/rodape.php')
?>
</div>
</body>
</html>

 

código javascript

 

 

window.onload = function() {

document.getElementById('pano').addEventListener('change', upload, false);
};
// Load the predefined panorama
function loadPredefinedPanorama(evt) {
evt.preventDefault();
var div = document.getElementById('container');
var PSV = new PhotoSphereViewer({
// Container
container: div,
// Deactivate the animation
time_anim: false,
// Display the navigation bar
navbar: true,
// Resize the panorama
size: {
width: '100%',
height: '500px'
}
});
}
// Load a panorama stored on the user's computer
function upload() {
// Retrieve the chosen file and create the FileReader object
var file = document.getElementById('Foto360').files[0];
var reader = new FileReader();
reader.onload = function() {
var div = document.getElementById('mostraFoto360');
var PSV = new PhotoSphereViewer({
// Panorama, given in base 64
panorama: reader.result,
// Container
container: div,
// Deactivate the animation
time_anim: false,
// Display the navigation bar
navbar: true,
// Set max tilt angle
tilt_up_max: 40,
// Resize the panorama
size: {
width: '100%',
height: '500px'
}
});
};
reader.readAsDataURL(file);
}

 

estou usando essa biblioteca

 

https://github.com/JeremyHeleine/Photo-Sphere-Viewer

ahhh sim a imagem vem de uma pasta do usuario

 

se alguém souber e puder compartilhar, ficarei muito agradecido :)

 


obs: vi que tinha um <a href> referenciando pra ENTRAR na foto, não quero isso, quero que ela apareça já mostrando os 360...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito