[SOLUCIONADO] Cambiar tamaño de imagen "autorefrescada"

josecmorales · #1 (**permalink**) 08/09/2014, 19:24

Buen día amigos, se casi nada de JS, conseguí un script en PHP que trae una imagen de una camara IP, el problema es que se trae el tamaño maximo (1280*720), y sólo quiero que se vea en 640*360, es posible esto?, anexo copia del script para que lo detallen.

Código:

?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demostración de cámara IP www.Foscam.es</title>
</head>

<script type='text/javascript'> 
	var URL='http://<?php echo"$url:$puerto/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=$user&pwd=$pass";?>'; 
	var L=window.location.search; 
	L=L.substring(1,5); 
	if(L=="")L=1; 
	NuevaImagen=new Image(); 
	var I=new Date().getTime(); 
	var imgW=640*L; 
	function Refresca(){document.getElementById("Mostrada").src=URL+'&'+I++;} 
</script> 
</head> 
<body onload=Refresca()> 
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="640" height="360" bgcolor="#FF9900" > 
  <tr> 
    <td width="640" height="80" align="center"> 
		<h2>Demostración de cámara IP <a href="http://www.foscam.es" target="_blank">www.foscam.es</a></h2>
    </td> 
  </tr> 
  <tr> 
    <td width="640" height="360"> 
    <img id="Mostrada" border=0 onload=setTimeout("Refresca()",10) onerror=setTimeout("Refresca()",100)> 
   </td> 
  </tr> 
</table> 
</div> 
</body> 
</html>

Ojo la dirección de la toma instantánea se define arriba del script

Alexis88 · #2 (**permalink**) 08/09/2014, 19:41

Podrías establecer dimensiones fijas para el elemento <img> en la hoja de estilos (propiedades width y height).

Saludos

josecmorales · #3 (**permalink**) 09/09/2014, 19:40

Cita:

Iniciado por Alexis88

Podrías establecer dimensiones fijas para el elemento <img> en la hoja de estilos (propiedades width y height).

Saludos

Lo he puesto en varias partes pero sigue igual!, en que parte del codigo lo colocarias?

Alexis88 · #4 (**permalink**) 09/09/2014, 20:44

Como te lo dije, en la hoja de estilos, es decir, en un archivo con extensión .css que luego incluirás en la cabecera del documento. También podrías colocar dichos estilos entre las etiquetas <style></style>.

Código HTML:

Ver original<!DOCTYPE html>
<html lang = "es">
<head>
    <meta charset = "utf-8" />
    <title>Ejemplo</title>
    <style type = "text/css">
    body{
        background: red;
    }
    </style>
</head>
<body>
    <!-- Aquí va tu contenido -->
</body>
</html>

El ejemplo anterior generará un documento HTML con el fondo de color rojo. También podrías colocar esos estilos en un archivo con extensión CSS y luego lo incluyes en el documento con la etiqueta <link>.

Código HTML:

Ver original<link rel = "stylesheet" type = "text/css" href = "tuarchivo.css" />

Saludos

josecmorales · #5 (**permalink**) 16/09/2014, 19:56

Puede ser ese código, pero conseguí uno mas fácil

Código:

<img id="Mostrada" border=0 onload=setTimeout("Refresca()",10) onerror=setTimeout("Refresca()",100) width="640" height="360">

simplemente se agregan características en la linea de la imagen y listo

Alexis88 · #6 (**permalink**) 16/09/2014, 20:23

Lo único que haces ahí es ejecutar funciones. Si modificaras los estilos desde una hoja de estilos, no tendrías que añadir nada de eso, además, sería más eficiente y, en caso de que el usuario desactive JS del navegador, seguiría surtiendo efecto. Con lo que tienes, si el usuario desactiva JS del navegador, nada de lo que hiciste funcionará. Tenlo en cuenta.

Saludos