Cách chụp ảnh màn hình một phần của Google Maps sử dụng JavaScript

Question

Trên trang của tôi, có một vùng chứa sử dụng API Google Maps để hiển thị bản đồ, có nút bên dưới, người dùng có thể kéo bản đồ đến vị trí, sau đó nhấp vào nút, tôi muốn chụp ảnh màn hình của bản đồ được hiển thị trong vùng chứa ngay bây giờ và hiển thị nó trong canvas. Có thể làm điều này với JavaScript thuần túy không?

Chỉ cần hỗ trợ Chrome

Answer 1

Sẽ rất khó để thực hiện mà không cần hỗ trợ trình duyệt. Nhưng bạn có thể sử dụng Google Maps tĩnh API: https://developers.google.com/maps/documentation/staticmaps/

Ví dụ: https://developers.google.com/maps/documentation/staticmaps/#quick_example

---

Có một số dự án để vẽ HTML DOM để vải:

• HTML2Canvas: http://html2canvas.hertzen.com/index.html
• jsFeedback: http://hertzen.com/experiments/jsfeedback/

Bạn cũng có thể tích hợp javascript với một số giải pháp server-side (sử dụng webkit) ví dụ phantomjs

Mã ví dụ: (đọc thêm here)

var page = require('webpage').create(); 

page.open('http://www.google.com', function() { 

    page.viewportSize = {width: 1024, height: 768}; 
    page.render('screenshot.png'); 
    phantom.exit(); 
}); 

---

Nếu bạn cần giải pháp duy nhất chrome cho cụ thể phạm vi người dùng, bạn có thể viết tiện ích chrome của riêng mình để thực hiện việc này: Taking screenshot using javascript for chrome extensions