Cómo hacer una miniatura de un div

Question

Tengo un div con texto e imágenes, y quiero mostrar una miniatura de este div en un lugar diferente de la página. Alguna solución?

Edit: Quiero una copia más pequeña del div, y esto debería funcionar en IE8, por lo que css3 no es una buena solución.

Answer 1

Usted puede tratar con html2canvas. Esta secuencia de comandos le permite tomar "capturas de pantalla" de páginas web o partes de ella.

IE8 requiere que incluya ya sea FlashCanvas o ExplorerCanvas.

podría no ser una representación perfecta, pero podría acercarlo.

Una vez que tenga su captura de pantalla, podrá reducir el tamaño del lienzo (canvas HTML5, ExplorerCanvas o FlashCanvas) al tamaño que necesite - nota: puede tener problemas con anti-aliasing y artefactos en la escala versión ... por lo que puede ser necesario algún trabajo adicional.

Answer 2

intentar algo como esto:

$('#myDiv').clone().appendTo('body').css({'position':'absolute','left':'50px;','top':'300px','transform':'scale(0.5)'}) 
}); 

nota: como se suele decir, usted debe comprobar en qué navegador es el usuario y añadir el vendedor (MOZ, ms, o, webkit, etc ..) a la propiedad CSS transformar

aquí se puede jugar un poco con él: http://jsfiddle.net/ZPMNz/11/ (con Firefox proveedor)

---

Pero si necesita suppo rt para IE8, podría agregar una clase a la div y declarar diferentes estilos para ello:

$('#myDiv').clone().appendTo('body').addClass('.thumb')}); 
    }); 

y entonces usted tiene

#myDiv { width:500px;} 
#myDiv h1{ font-size:20px;} 
#myDiv h2{} 
#myDiv p{} 

#myDiv.thumb { width:200px;} 
#myDiv.thumb h1{ font-size:10px;} 
#myDiv.thumb h2{} 
#myDiv.thumb p{} 

Es más trabajo, pero tiene una mayor compatibilidad