แสดงสไลด์การนำเสนอเป็นภาพ SVG ใน JavaScript

ภาพรวม

บทความนี้อธิบายวิธีการแปลงสไลด์การนำเสนอเป็นภาพ SVG ด้วย Aspose.Slides โดยอธิบายรูปแบบ SVG และข้อได้เปรียบของมัน รวมถึงความสามารถในการขยาย การเข้าถึงได้ง่าย และความเหมาะสมสำหรับการพัฒนาเว็บ

คุณจะได้เรียนรู้วิธีโหลดไฟล์การนำเสนอ, วนซ้ำผ่านสไลด์ทั้งหมด, และบันทึกแต่ละสไลด์เป็นไฟล์ SVG แยกกัน บทความครอบคลุมรูปแบบการนำเสนอ PowerPoint และ OpenDocument ได้แก่ PPT, PPTX, ODP และ PPS และแสดงวิธีทำการแปลงโดยใช้โปรแกรมด้วยคลาส Presentation และเมธอด writeAsSvg

รูปแบบ SVG

SVG—ย่อมาจาก Scalable Vector Graphics—เป็นประเภทหรือรูปแบบกราฟิกมาตรฐานที่ใช้ในการแสดงภาพสองมิติ SVG จัดเก็บภาพเป็นเวกเตอร์ในรูปแบบ XML พร้อมรายละเอียดที่กำหนดพฤติกรรมหรือรูปลักษณ์ของภาพ

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

คุณอาจต้องการใช้ไฟล์ SVG เมื่อคุณต้องการ

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

แสดงสไลด์เป็นภาพ SVG

Aspose.Slides for Node.js via Java ช่วยให้คุณส่งออกสไลด์จากการนำเสนอเป็นภาพ SVG ทำตามขั้นตอนต่อไปนี้เพื่อสร้างภาพ SVG:

1. สร้างอินสแตนซ์ของคลาส Presentation
2. วนซ้ำผ่านสไลด์ทั้งหมดในการนำเสนอ
3. เขียนสไลด์แต่ละอันลงในไฟล์ SVG แยกโดยใช้ FileOutputStream

คุณอาจต้องการลองใช้ แอปพลิเคชันเว็บฟรี ของเราซึ่งเราได้ทำฟังก์ชันการแปลง PPT เป็น SVG จาก Aspose.Slides for Node.js via Java

โค้ดตัวอย่างนี้ใน JavaScript แสดงให้คุณเห็นวิธีแปลง PPT เป็น SVG ด้วย Aspose.Slides:

var pres = new aspose.slides.Presentation("pres.pptx");
try {
    for (var index = 0; index < pres.getSlides().size(); index++) {
        var slide = pres.getSlides().get_Item(index);
        var fileStream = java.newInstanceSync("java.io.FileOutputStream", ("slide-" + index) + ".svg");
        try {
            slide.writeAsSvg(fileStream);
        } finally {
            fileStream.close();
        }
    }
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

คำถามที่พบบ่อย

ทำไม SVG ที่ได้อาจดูแตกต่างกันในแต่ละเบราว์เซอร์?

การสนับสนุนฟีเจอร์ SVG เฉพาะจะแตกต่างกันระหว่างเอนจินของเบราว์เซอร์ พารามิเตอร์ของ SVGOptions ช่วยลดความไม่เข้ากัน

สามารถส่งออกไม่เพียงสไลด์เท่านั้น แต่รวมถึงรูปร่างแต่ละอันเป็น SVG ได้หรือไม่?

ได้. รูปร่างใดก็สามารถ บันทึกเป็น SVG แยกต่างหาก ได้ ซึ่งสะดวกสำหรับไอคอน, ภาพสัญลักษณ์, และการใช้กราฟิกซ้ำ

สามารถรวมหลายสไลด์เป็น SVG เดียว (strip/document) ได้หรือไม่?

สถานการณ์มาตรฐานคือสไลด์หนึ่ง → SVG หนึ่ง การรวมหลายสไลด์เข้าด้วยกันในแคนวาส SVG เดียวเป็นขั้นตอนการประมวลผลหลังจากที่ทำงานระดับแอปพลิเคชัน