วิธีแสดงภาพขนาดใหญ่ด้วย Google Maps Viewer

, , Leave a comment

ถ้าหากต้องการแสดงภาพที่มีขนาดใหญ่มากๆ อย่างเช่น ภาพพาราโนมา ภาพแผนที่ขนาดใหญ่ สไลด์ชิ้นเนื้อที่ถ่ายแบบทั้งสไลด์ เป็นต้น ต้องการแสดงผลแบบที่เห็นภาพโดยรวมของภาพทั้งหมดก่อน และเมื่ออยากดูรายละเอียดที่ชัดเจนมากยิ่งขึ้น สามารถซูมเข้าไปดูได้ พูดง่ายๆคือแสดงเหมือนแผนที่ใน Google Maps เมื่อเลือกตำแหน่งที่สนใจได้แล้ว ก็สามารถซูมเข้าไปดูใกล้ๆได้ เพื่อดูรายละเอียดที่ชัดเจนมากยิ่งขึ้น

ในความเป็นจริงถ้าเราแสดงภาพที่มีความละเอียดสูงตั้งแต่แรกจะทำให้การโหลดข้อมูลทำได้ช้ามากเพราะภาพจะมีขนาดใหญ่ วิธีดังกล่าวนี้จะเลือกโหลดภาพเฉพาะส่วนที่จำเป็นมาแสดงทำให้การแสดงผลทำได้ราบรื่นกว่ามาก เช่น ถ้าหากต้องการดูพื้นที่โดยรวมทั้งหมดก็จะโหลดภาพที่มีความละเอียดต่ำมาแสดงผล ถ้าต้องการดูส่วนที่ละเอียดมากขึ้นเมื่อกดซูมระบบจะดึงภาพที่มีความละเอียดสูงกว่ามาแสดงเฉพาะส่วนตรงจุดที่เราสนใจ เมื่อเราคลิกเลื่อนตำแหน่งไปเรื่อยๆก็จะโหลดภาพส่วนนั้นเพิ่มเข้ามาแสดงผล

ตัวอย่างเว็บไซต์ที่ใช้ Google Maps Viewer มาใช้งาน มีหลากหลายเว็บไซต์ ยกตัวอย่างเช่น https://www.pathobin.com

ขั้นตอนการใช้ Google Maps Viewer แสดงภาพขนาดใหญ่

  1. ดาวน์โหลดโปรแกรม GMap Image Cutter  ลงไว้ในเครื่อง แตกไฟล์ที่อยู่ใน zip ออกมา
  2. เปิดโปรแกรมที่ชื่อ GMapImageCutter.jar ขึ้นมา ในเครื่องจะต้องมี Java ติดตั้งไว้ด้วย ถ้าไม่มีดาวน์โหลดและติดตั้งได้ที่ https://java.com/en/download/index.jsp
  3. คลิกเลือก File → Open เลือกไฟล์ภาพที่ต้องการนำมาแสดงด้วย Google Maps Viewer ในส่วนของ Max Zoom Level ควรตั้งไว้ตามค่าเดิม แต่ถ้าต้องการเพิ่มให้ซูมได้มากยิ่งขึ้นสามารถปรับเพิ่มได้ แต่ก็จะทำให้ต้องใช้เวลาในการสร้างไฟล์นานยิ่งขึ้น จากนั้นคลิกปุ่ม Create

    Gmap cutter
    Gmap cutter
  4. เมื่อโปรแกรมสร้างไฟล์เสร็จแล้ว จะได้ไฟล์ HTML และโฟลเดอร์ที่เก็บภาพที่โปรแกรมสร้างขึ้นมาใหม่จำนวนจะมากน้อยตามความละเอียดที่ตั้งไว้ สามารถแสดงผลได้ทันทีโดยการคลิกเปิดไฟล์ HTML ด้วยบราวเซอร์ท่องเว็บไซต์ทั้วไป เช่น Internet Explorer, Google chrome, Safari เป็นต้น สามารถดูในแบบ Offline ได้ทันที

    ภาพที่พร้อมใช้งาน
    ภาพที่พร้อมใช้งาน
  5. ถ้าต้องการนำภาพดังกล่าวไปแสดงบนเว็บไซต์สามารถทำได้โดยการอัพโหลดไฟล์ HTML และโฟลเดอร์ภาพขึ้นไปไว้บนเซิร์ฟเวอร์จากนั้นเรียกการแสดงผลโดยการใช้โค้ด

ยกตัวอย่างโค้ด

<iframe src="panorama.html" width="800" height="600" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
 </iframe>

หรืออัพโหลดขึ้น Dropbox ซึ่งสามารถแสดงไฟล์ที่เป็น HTML ได้เลยเช่นกัน ต้องใส่ไว้ใน public folder ยกตัวอย่าง https://dl.dropboxusercontent.com/u/1622318/Tissue-section.html

ข้อมูลจาก https://www.labnol.org

 

Leave a Reply