Imprimir foto
Quiero saber como puedo imprimir una foto de una página web compuesta por multitud de cosas. No quiero que se imprima nada (ni el fondo ni las letras ni los banners), solo la foto. Por favor detallarme el código.
1 Respuesta
Respuesta de bruckner
1
Soy Bruckner. Intentaré ayudarte.
La solución más sencilla a tu problema pasa por abrir una ventana con la foto, e imprimirla. Existe una posible variante de esto mismo, pero sin abrir la ventana, que funcionaría tan solo en navegadores modernos (Explorer 5 y Netscape 6). Te detallaré primero la primera alternativa:
Supongamos que tu imagen se llama 'imagen.jpg', y que está en el mismo directorio que la página que la muestra (si no, habría que ajustar el ejemplo correspondientemente). El siguiente script va en la cabecera de tu página:
<script language="Javascript"><!--
function imprimirImagen(imgSrc) {
var hVent=window.open('','ventanaImagen');
var html='<html><head><\/head><body onload="window.print()">';
html+='<img src="'+imgSrc+'">';
html+='<\/body><\/html>';
hVent.write(html);
}
// --></script>
Y lo llamarás desde un botón, un enlace... Supongamos que quieres imprimir la foto pulsando sobre ella:
<a href="#" onClick="imprimirImagen('imagen.jpg')"><img src="imagen.jpg" border=0></a>
Ya está. La modificación para que no aparezca una ventana consiste en crear en la propia página un IFRAME oculto, cargar en él la foto e imprimirlo. Esto es más elegante, pero como te dije, sólo funcionará en Explorer 5 o Netscape 6:
<script language="Javascript"><!--
function imprimirImagen(imgSrc) {
var iframeElem=document.createElement('IFRAME');
var bodyElem=document.getElementsByTagName('BODY').item(0);
iframeElem.style.display='none';
bodyElem.appendChild(iframeElem);
iframeElem.location.href=imgSrc;
iframeElem.onload=print;
}
// --></script>
Como antes, se trata de poner ese script en la cabecera, y llamarlo del mismo modo que el anterior.
No dudes en preguntarme de nuevo si tienes algún problema. Que tengas suerte.
La solución más sencilla a tu problema pasa por abrir una ventana con la foto, e imprimirla. Existe una posible variante de esto mismo, pero sin abrir la ventana, que funcionaría tan solo en navegadores modernos (Explorer 5 y Netscape 6). Te detallaré primero la primera alternativa:
Supongamos que tu imagen se llama 'imagen.jpg', y que está en el mismo directorio que la página que la muestra (si no, habría que ajustar el ejemplo correspondientemente). El siguiente script va en la cabecera de tu página:
<script language="Javascript"><!--
function imprimirImagen(imgSrc) {
var hVent=window.open('','ventanaImagen');
var html='<html><head><\/head><body onload="window.print()">';
html+='<img src="'+imgSrc+'">';
html+='<\/body><\/html>';
hVent.write(html);
}
// --></script>
Y lo llamarás desde un botón, un enlace... Supongamos que quieres imprimir la foto pulsando sobre ella:
<a href="#" onClick="imprimirImagen('imagen.jpg')"><img src="imagen.jpg" border=0></a>
Ya está. La modificación para que no aparezca una ventana consiste en crear en la propia página un IFRAME oculto, cargar en él la foto e imprimirlo. Esto es más elegante, pero como te dije, sólo funcionará en Explorer 5 o Netscape 6:
<script language="Javascript"><!--
function imprimirImagen(imgSrc) {
var iframeElem=document.createElement('IFRAME');
var bodyElem=document.getElementsByTagName('BODY').item(0);
iframeElem.style.display='none';
bodyElem.appendChild(iframeElem);
iframeElem.location.href=imgSrc;
iframeElem.onload=print;
}
// --></script>
Como antes, se trata de poner ese script en la cabecera, y llamarlo del mismo modo que el anterior.
No dudes en preguntarme de nuevo si tienes algún problema. Que tengas suerte.
Las respuestas me valen las dos, pero tengo otra cosa que añadir.
Quiero tener la oportunidad de poder imprimir la foto en varios tamaños, con radiobuttons eliges una de los tamaños que hay para elegir.
Gracias por todo
Si me respondes esto es una matricula de honor
Quiero tener la oportunidad de poder imprimir la foto en varios tamaños, con radiobuttons eliges una de los tamaños que hay para elegir.
Gracias por todo
Si me respondes esto es una matricula de honor
Hay dos formas de hacer esto: la "cutre" y la buena. La "cutre" consiste en generar la imagen y alterar su tamaño en tiempo real con los atributos height y width, pero eso conlleva que...
a) Si la imagen se hace más pequeña, el resultado es como si hubiera perdido detalle a base de quitarle trozos... o
b) Si la imagen se hace más grande, lo que antes eran puntos se verán como cuadrados. Esto es todavía más espantoso.
Por ello, y aunque la solución buena lleva algo más de trabajo, es preferible. Primero necesitas disponer de tantas copias como quieras ofrecer de tu imagen, con distintos tamaños, obteniendo las reducciones/ampliaciones por medio de algún programa decente, como Photoshop, Paint Shop Pro o (en Linux) Gimp (aplica un "resampleado" de la imagen para obtener resultados óptimos). Supongamos que tienes tres imágenes resultantes: imagen1.jpg, imagen2.jpg e imagen3.jpg, todas subidas al mismo directorio del servidor.
Ahora es cuestión de introducir el formulario con los radiobuttons, y escoger...
<form>
Escoge una imagen para imprimir: <br>
Tamaño 1 <input type="radio" name="chooseImg" value="imagen1.jpg"><br>
Tamaño 2 <input type="radio" name="chooseImg" value="imagen2.jpg"><br>
Tamaño 3 <input type="radio" name="chooseImg" value="imagen3.jpg"><br>
<input type="button" value="Imprimir" onClick="imprimirImagenEscogida(this.form.chooseImg)">
</form>
Claro, que antes hay que definir la función imprimirImagenEscogida(). El mejor sitio para hacerlo es en el script de cabecera donde tengas la función imprimirImagen(), justo después de ésta:
function imprimirImagenEscogida(radiobuttons) {
for (var i=0;i<radiobuttons.length;i++) {
if (radiobuttons.status) imprimirImagen(radiobuttons.value);
}
}
Y ya está. Visto así, no parece tan difícil, ¿verdad? Espero que te sea muy útil, y ya sabes, contáctame si tienes algún problema.
a) Si la imagen se hace más pequeña, el resultado es como si hubiera perdido detalle a base de quitarle trozos... o
b) Si la imagen se hace más grande, lo que antes eran puntos se verán como cuadrados. Esto es todavía más espantoso.
Por ello, y aunque la solución buena lleva algo más de trabajo, es preferible. Primero necesitas disponer de tantas copias como quieras ofrecer de tu imagen, con distintos tamaños, obteniendo las reducciones/ampliaciones por medio de algún programa decente, como Photoshop, Paint Shop Pro o (en Linux) Gimp (aplica un "resampleado" de la imagen para obtener resultados óptimos). Supongamos que tienes tres imágenes resultantes: imagen1.jpg, imagen2.jpg e imagen3.jpg, todas subidas al mismo directorio del servidor.
Ahora es cuestión de introducir el formulario con los radiobuttons, y escoger...
<form>
Escoge una imagen para imprimir: <br>
Tamaño 1 <input type="radio" name="chooseImg" value="imagen1.jpg"><br>
Tamaño 2 <input type="radio" name="chooseImg" value="imagen2.jpg"><br>
Tamaño 3 <input type="radio" name="chooseImg" value="imagen3.jpg"><br>
<input type="button" value="Imprimir" onClick="imprimirImagenEscogida(this.form.chooseImg)">
</form>
Claro, que antes hay que definir la función imprimirImagenEscogida(). El mejor sitio para hacerlo es en el script de cabecera donde tengas la función imprimirImagen(), justo después de ésta:
function imprimirImagenEscogida(radiobuttons) {
for (var i=0;i<radiobuttons.length;i++) {
if (radiobuttons.status) imprimirImagen(radiobuttons.value);
}
}
Y ya está. Visto así, no parece tan difícil, ¿verdad? Espero que te sea muy útil, y ya sabes, contáctame si tienes algún problema.
A mi me viene mejor de la forma cutre, ya que lo único que quiero es puedan sacar imágenes más paqueñas que la origen.
¿Se podía hacer que en uno de esos radio button la imagen girara 90º ademas de cambiar el width y height?
Gracias super
¿Se podía hacer que en uno de esos radio button la imagen girara 90º ademas de cambiar el width y height?
Gracias super
Si además quieres mostrar la imagen girada 90 grados, tendrás que usar la solución "buena". Como en realidad se basa en que los radio button seleccionan imágenes distintas, nadie te impide poner una versión girada (naturalmente, grabada aparte y con un nombre distinto, aunque en el mismo directorio, por comodidad). La ventaja que tiene esta solución, aparte de la calidad del resultado, es la flexibilidad. Podrías, por ejemplo, querer tener además versiones en color y blanco y negro, o con distintas profundidades de color, además de distintos tamaños. Te recomiendo que no utilices la forma "cutre", porque, visto lo que quieres, tendrás que usar la otra de todas formas.
Si quieres que te dé código para la forma "cutre", a pesar de todo, vuelve a preguntarme. Y, por cierto, disculpa el retraso, pero he tenido que viajar por motivos laborales y llevo una semana fuera...
Si quieres que te dé código para la forma "cutre", a pesar de todo, vuelve a preguntarme. Y, por cierto, disculpa el retraso, pero he tenido que viajar por motivos laborales y llevo una semana fuera...
Necesito saber como girar la foto 90º de la forma "cutre", ya que dispongo de más de 3000 fotos y es imposible guardar cada foto en los diferentes formatos.
Gracias por todo
Gracias por todo
Lo que te quería decir con mi respuesta anterior es que no hay otro modo de presentar una imagen girada 90 grados (o cualquier otra inclinación), en ningún navegador, que no sea girarla a mano, guardarla con otro nombre y utilizar una técnica como la que te describía antes para presentar (imprimir) una u otra.
Es decir, que si quieres varios tamaños e imágenes giradas, no hay otro modo de hacerlo. Si el número de imágenes es inmanejable, te recomiendo que utilices algún conversor de ficheros de imágenes en modo batch (línea de comandos). No conozco ninguna solución para Windows (aunque estoy seguro de que debe haber alguna), pero para Linux existe un paquete llamado ImageMagick, que ofrece comandos como:
mogrify -rotate 90 *.jpg
Si tecleas eso en una consola, todas las imágenes jpg del directorio actual girarán 90 grados. Es rapidísimo, además, y son posibles todo tipo de transformaciones (cambios de tamaño, enfoques, desenfoques, brillo, contraste, cambio de formato...)
Si no quieres seguir por ese camino tendrás que renunciar a girar las fotos. Aquí tienes un script desarrollado a partir de la segunda solución que te dí, que admite distintas alturas y anchuras para las imágenes que imprime:
<script language="Javascript"><!--
function imprimirImagen(imgSrc,h,w) {
var iframeElem=document.createElement('IFRAME');
var bodyElem=document.getElementsByTagName('BODY').item(0);
iframeElem.style.display='none';
bodyElem.appendChild(iframeElem);
var html='<html><head><\/head><body onload="print()">';
html+='<img src="'+imgSrc+'" height="'+h+'" width="'+w+'">';
html+='<\/body><\/html>';
iframeElem.write(html);
iframeElem.close();
}
// --></script>
Desgraciadamente hay ciertos límites a lo que se puede hacer en la web, que espero que comprendas. No dudes en volverme a preguntar si tienes problemas.
Es decir, que si quieres varios tamaños e imágenes giradas, no hay otro modo de hacerlo. Si el número de imágenes es inmanejable, te recomiendo que utilices algún conversor de ficheros de imágenes en modo batch (línea de comandos). No conozco ninguna solución para Windows (aunque estoy seguro de que debe haber alguna), pero para Linux existe un paquete llamado ImageMagick, que ofrece comandos como:
mogrify -rotate 90 *.jpg
Si tecleas eso en una consola, todas las imágenes jpg del directorio actual girarán 90 grados. Es rapidísimo, además, y son posibles todo tipo de transformaciones (cambios de tamaño, enfoques, desenfoques, brillo, contraste, cambio de formato...)
Si no quieres seguir por ese camino tendrás que renunciar a girar las fotos. Aquí tienes un script desarrollado a partir de la segunda solución que te dí, que admite distintas alturas y anchuras para las imágenes que imprime:
<script language="Javascript"><!--
function imprimirImagen(imgSrc,h,w) {
var iframeElem=document.createElement('IFRAME');
var bodyElem=document.getElementsByTagName('BODY').item(0);
iframeElem.style.display='none';
bodyElem.appendChild(iframeElem);
var html='<html><head><\/head><body onload="print()">';
html+='<img src="'+imgSrc+'" height="'+h+'" width="'+w+'">';
html+='<\/body><\/html>';
iframeElem.write(html);
iframeElem.close();
}
// --></script>
Desgraciadamente hay ciertos límites a lo que se puede hacer en la web, que espero que comprendas. No dudes en volverme a preguntar si tienes problemas.
Eres un crack en esto, ¿te he incluido en mi lista de favoritos espero que no te importe?. Pronto te haré más preguntas. Lo siento pero no hay nota más alta.
