Cách tạo một hình thu nhỏ của một div

Question

Tôi có một div với văn bản và hình ảnh, và tôi muốn hiển thị hình thu nhỏ của div này ở một vị trí khác trong trang. Bất kỳ giải pháp?

Chỉnh sửa: Tôi muốn bản sao nhỏ hơn của div và điều này sẽ hoạt động trên IE8, vì vậy css3 không phải là giải pháp tốt.

Answer 1

Bạn có thể thử với html2canvas. Tập lệnh này cho phép bạn chụp "ảnh chụp màn hình" của các trang web hoặc một phần của nó.

IE8 yêu cầu bạn bao gồm FlashCanvas hoặc ExplorerCanvas.

Nó có thể không phải là đại diện hoàn hảo pixel, nhưng nó có thể giúp bạn gần gũi.

Khi bạn có ảnh chụp màn hình, bạn sẽ có thể thu nhỏ canvas (canvas HTML5, ExplorerCanvas hoặc FlashCanvas) xuống bất kỳ kích thước nào bạn cần - lưu ý: bạn có thể gặp phải các vấn đề với chống răng cưa và tạo tác trong tỷ lệ phiên bản ... vì vậy một số công việc bổ sung có thể cần thiết.

Answer 2

thử một cái gì đó như thế này:

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

lưu ý: như họ nói, bạn nên kiểm tra dưới những gì trình duyệt người dùng và thêm các nhà cung cấp (MOZ, ms, o, webkit, vv ..) để tài sản css chuyển

đây bạn có thể chơi một chút với nó: http://jsfiddle.net/ZPMNz/11/ (với nhà cung cấp firefox)

---

Nhưng nếu bạn cần suppo rt cho ie8, có thể thêm một lớp học để các div và tuyên bố phong cách khác nhau cho nó:

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

và sau đó bạn có

#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{} 

nó làm việc nhiều hơn nhưng có khả năng tương thích hơn