ดึง SVG จากเว็บไซต์ด้วย Java

ดึง SVG แบบอินไลน์และภายนอกจาก HTML ด้วย Java

Aspose.HTML for Java โหลดหน้าเว็บลงใน HTMLDocument เพื่อให้แอปพลิเคชันตรวจสอบทั้งมาร์กอัป SVG ที่ฝังอยู่และทรัพยากร SVG ที่เชื่อมโยงได้ กราฟิกแบบอินไลน์ปรากฏเป็นองค์ประกอบ <svg> ใน DOM ส่วนไฟล์ SVG ภายนอกอาจถูกอ้างอิงด้วยองค์ประกอบ เช่น <img src="image.svg">

บันทึกกราฟิกแบบอินไลน์โดยเขียนค่า getOuterHTML() ลงในไฟล์ .svg สำหรับกราฟิกภายนอก ให้แปลง URL สัมพัทธ์เป็น URL แบบสัมบูรณ์โดยใช้ document.getBaseURI() ส่งคำขอทรัพยากรผ่านบริการเครือข่ายของเอกสาร และบันทึกข้อมูลไบต์ที่ได้รับโดยไม่เข้ารหัสใหม่

บันทึกกราฟิก SVG ที่พบในหน้าเว็บ

ตัวอย่าง Java บันทึกองค์ประกอบ <svg> แบบอินไลน์ทุกองค์ประกอบ และดาวน์โหลดไฟล์ SVG ภายนอกที่ไม่ซ้ำกันซึ่งองค์ประกอบ <img> อ้างอิง การใช้ชื่อแยกกันช่วยให้ระบุแหล่งที่มาทั้งสองประเภทได้ง่ายในไดเรกทอรีผลลัพธ์ svg

Path outputDirectory = Paths.get("svg");
Files.createDirectories(outputDirectory);

try (HTMLDocument document = new HTMLDocument("https://products.aspose.com/html/java/")) {
    // Save inline SVG elements as standalone files
    HTMLCollection inlineSvgElements = document.getElementsByTagName("svg");
    int inlineNumber = 1;

    for (Element svgElement : inlineSvgElements) {
        Path outputPath = outputDirectory.resolve("inline-" + inlineNumber + ".svg");
        byte[] svgMarkup = svgElement.getOuterHTML().getBytes(StandardCharsets.UTF_8);
        Files.write(outputPath, svgMarkup);
        inlineNumber++;
    }

    // Collect distinct external SVG sources from image elements
    HTMLCollection images = document.getElementsByTagName("img");
    Set<String> externalSources = new LinkedHashSet<>();

    for (Element image : images) {
        String source = image.getAttribute("src");
        if (source.isEmpty()) {
            continue;
        }

        Url resourceUrl = new Url(source, document.getBaseURI());
        if (resourceUrl.getPathname().toLowerCase().endsWith(".svg")) {
            externalSources.add(source);
        }
    }

    int externalNumber = 1;
    for (String source : externalSources) {
        Url resourceUrl = new Url(source, document.getBaseURI());
        RequestMessage request = new RequestMessage(resourceUrl);
        ResponseMessage response = document.getContext().getNetwork().send(request);

        if (response.isSuccess()) {
            Path outputPath = outputDirectory.resolve("external-" + externalNumber + ".svg");
            Files.write(outputPath, response.getContent().readAsByteArray());
            externalNumber++;
        }
    }
}

ขั้นตอนการดึง SVG ด้วย Java

1. โหลดหน้าเป้าหมายด้วย HTMLDocument
2. รวบรวมองค์ประกอบ <svg> แบบอินไลน์ด้วย getElementsByTagName("svg") และเขียนค่า getOuterHTML() ของแต่ละองค์ประกอบเป็นข้อความ UTF-8
3. รวบรวมองค์ประกอบ <img> และอ่านแอตทริบิวต์ src ที่ไม่ว่าง
4. แปลงแหล่งที่มาแบบสัมพัทธ์แต่ละรายการเป็น URL แบบสัมบูรณ์ด้วย Url และเก็บ URL ที่พาธลงท้ายด้วย .svg
5. ส่ง RequestMessage สำหรับ SVG ภายนอกแต่ละรายการ และตรวจสอบ ResponseMessage
6. บันทึกการตอบกลับที่สำเร็จแต่ละรายการเป็นไฟล์ .svg ด้วย Files.write()

SVG แบบอินไลน์และ SVG ภายนอก

SVG แบบอินไลน์เป็นส่วนหนึ่งของ HTML DOM มาร์กอัป XML ของกราฟิกพร้อมใช้งานผ่านองค์ประกอบ <svg> ที่เกี่ยวข้อง และสามารถแปลงเป็นข้อความด้วย getOuterHTML()

SVG ภายนอกเป็นทรัพยากรแยกต่างหากที่อ้างอิงด้วย URL โค้ดจะดาวน์โหลดไฟล์ที่องค์ประกอบ <img> ใช้ ส่วน SVG ที่อ้างอิงผ่านองค์ประกอบอื่น CSS หรือลิงก์แบบ fragment ต้องใช้ตัวเลือกที่เหมาะกับตำแหน่งเหล่านั้น

อ่าน Extract SVG From Website in Java เพื่อดูเวิร์กโฟลว์ SVG แบบอินไลน์และภายนอกในเอกสารประกอบ

ข้อควรระวังในการดึง SVG

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

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

1. เหตุใดจึงดาวน์โหลดรูปภาพ SVG บางรายการจากเว็บไซต์โดยตรงไม่ได้?

เว็บไซต์จำนวนมากฝังกราฟิกเป็นองค์ประกอบ <svg> แบบอินไลน์แทนการเชื่อมโยงไปยังไฟล์ .svg แยกต่างหาก ต้องค้นหา SVG แบบอินไลน์ใน HTML DOM และบันทึกจากมาร์กอัปที่ getOuterHTML() ส่งคืน แทนการดาวน์โหลดจาก URL ของทรัพยากร

2. จะดึงไฟล์ SVG และไอคอนจากหน้าเว็บด้วย Java ได้อย่างไร?

Aspose.HTML for Java สามารถตรวจสอบแหล่งที่มาของ SVG ในเอกสารที่โหลดแล้ว แต่ไม่มีตัวเลือกเดียวที่ครอบคลุมทุกตำแหน่ง ตรวจสอบ <svg> แบบอินไลน์, <img src>, <object data>, <embed src>, url() ใน CSS และการอ้างอิง SVG sprite ตามวิธีที่หน้าเว็บใช้รวมกราฟิก

3. การดึง SVG จาก HTML รักษาคุณภาพเวกเตอร์ไว้หรือไม่?

การบันทึกมาร์กอัป SVG แบบอินไลน์หรือข้อมูลไบต์ต้นฉบับของ SVG ภายนอกไม่ทำให้กราฟิกเป็นภาพแรสเตอร์ พาธเวกเตอร์และขนาดที่ปรับสเกลได้จึงยังคงอยู่ อย่างไรก็ตาม ไฟล์ที่บันทึกอาจแสดงผลต่างออกไปหากต้องใช้ CSS แบบอักษร รูปภาพ สคริปต์ หรือสัญลักษณ์ภายนอกจากหน้าเว็บที่ไม่ได้คัดลอกมาด้วย

4. Aspose.HTML for Java สามารถดึงไฟล์ SVG จากทั้งเว็บไซต์ได้หรือไม่?

Aspose.HTML for Java ดึง SVG จากหน้าที่โหลดลงใน HTMLDocument และไม่ได้รวบรวมทุกหน้าในโดเมนโดยอัตโนมัติ หากต้องการประมวลผลทั้งเว็บไซต์ ให้ระบุ URL ของหน้าที่อนุญาต ตรวจสอบเอกสารแต่ละหน้า และตัดทรัพยากร SVG ที่ซ้ำกันออก

ติดตั้ง Aspose.HTML for Java

เพิ่ม Aspose.HTML for Java จากที่เก็บอย่างเป็นทางการของ Aspose แทนที่ ASPOSE_HTML_VERSION ด้วยหมายเลขเวอร์ชันที่ตรงกันจากหน้า รุ่นของ Aspose.HTML for Java จากนั้นโหลดหรือสร้างโครงการใหม่เพื่อให้ระบบแก้ไขการขึ้นต่อกันได้

เพิ่มที่เก็บและการขึ้นต่อกันในโครงการ Maven:

<repositories>
    <repository>
        <id>AsposeJavaAPI</id>
        <url>https://releases.aspose.com/java/repo/</url>
    </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>com.aspose</groupId>
        <artifactId>aspose-html</artifactId>
        <version>ASPOSE_HTML_VERSION</version>
    </dependency>
</dependencies>

เพิ่มที่เก็บและการขึ้นต่อกันในโครงการ Gradle:

repositories {
    maven {
        url = uri('https://releases.aspose.com/java/repo/')
    }
}
dependencies {
    implementation 'com.aspose:aspose-html:ASPOSE_HTML_VERSION'
}

ใช้ JDK ที่เข้ากันได้กับรุ่นที่เลือก สำหรับการติดตั้ง JAR ด้วยตนเอง Kotlin DSL การอัปเดต และการแก้ไขปัญหาการขึ้นต่อกัน โปรดดู ติดตั้ง Aspose.HTML for Java