เป็นไปได้ไหมที่จะจับภาพหน้าจอของหน้าเว็บเป็นภาพ SVG?

31

ฉันมีเว็บเพจซึ่งใช้เวกเตอร์ทั้งหมด (ข้อความ, แบบอักษรไอคอน, SVGs แต่ไม่มี PNGs, JPEGs หรือ GIF)

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

สิ่งนี้ควรเป็นไปได้ แต่ฉันไม่สามารถหาสิ่งที่จะทำ

เครดิตพิเศษ: หากมีภาพบิตแมปไม่กี่ฉันต้องการ SVG ที่มีบิตแมปในตัว

html screenshot svg

— SLaks
แหล่งที่มา

ดูเหมือนว่าhtml2canvas.hertzen.comอาจช่วยได้ที่นี่

— SLAK

1

ไฟล์. html ที่เป็นปัญหาไม่ใช่สิ่งที่คุณต้องการจริง ๆ หรือ

— Sparr

@Sparr: ไม่; ฉันต้องการที่จะจัดการกับ SVG ในโปรแกรมแก้ไข (เช่นพืชมันเพิ่มแบนเนอร์) <img>จากนั้นนำมาใส่ใน (สำหรับหน้าช่วยเหลือ / การท่องเที่ยวของเว็บแอป)

— SLaks

ไฟล์ PNG หรือ JPEG จะถูกแปลงเป็น SVG ได้อย่างไร?

— HairOfTheDog

7

นี่เป็นแนวคิดที่มีประโยชน์อย่างมาก โดยเฉพาะอย่างยิ่งสำหรับนักออกแบบ UI ที่ต้องทำงานกับการพัฒนาเว็บไซต์ที่มีอยู่ ฉันจะจ่ายเงินสำหรับเครื่องมือที่มีคุณสมบัติการส่งออก SVG เพราะฉันเกลียดที่จะทำงานกับ mockups ด้วยโปรแกรมบิตแมปนี่เป็นเรื่องไร้สาระทั้งหมด

— smonff

10

ไม่ใช่ภาพสกรีนช็อต แต่ถ้าพิมพ์หน้าได้ดีคุณสามารถพิมพ์เป็น PDF ได้ ทั้ง Inkscape และ Illustrator จะโหลด PDF (และบันทึกเป็น SVG หากจำเป็น)

— แดน
แหล่งที่มา

เมื่อฉันลองสิ่งนี้ Firefox จะพิมพ์ปุ่มตัวเลือกบิตแมปไปยังไฟล์ PDF Chromium-browser และ wkhtmltopdf ผลิตไฟล์เวกเตอร์ทั้งหมด

— Randall Whitman

9

CSSBox WebVectorจะแปลงหน้า HTML เป็น SVG มันเป็น Java Application บรรทัดคำสั่งและคุณสามารถดูตัวอย่างของการส่งออกของที่นี่

— แอนดรู
แหล่งที่มา

ทั้งจริงแล้วโหมดบรรทัดคำสั่งและ GUI ฉันลอง WebVector เพื่อส่งออกไปยัง SVG ในรูปแบบ HTML ขนาดเล็กที่มีปุ่มตัวเลือก มันผลิตไฟล์ SVG ที่มีเนื้อหาเวกเตอร์ทั้งหมดตามที่ต้องการ - ไม่มีเนื้อหาบิตแมปที่ฝังตัว ปุ่มตัวเลือกแสดงผลเป็นสี่เหลี่ยมซึ่งมีลักษณะเหมือนกล่องกาเครื่องหมายของการเรนเดอร์ทั่วไป

— Randall Whitman

2

คำตอบนี้มีอยู่แล้วที่จับภาพหน้าจอหน้าเว็บขนาดใหญ่ใน Chrome

ฉันจะใช้CutyCaptมันจับการแสดงผลของเว็บคิตกับภาพ

CutyCapt เป็นยูทิลิตี้บรรทัดคำสั่งข้ามแพลตฟอร์มขนาดเล็กเพื่อจับภาพการเรนเดอร์หน้าเว็บของ WebKit ในรูปแบบเวกเตอร์และบิตแมปที่หลากหลายรวมถึง SVG, PDF, PS, PNG, JPEG, TIFF, GIF และ BMP ดู IECapt สำหรับเครื่องมือที่คล้ายกันโดยใช้ Internet Explorer

— CHX
แหล่งที่มา

ฉันลอง CutyCapt เพื่อส่งออกไปยัง SVG ในรูปแบบ HTML ขนาดเล็กที่มีปุ่มตัวเลือก มันผลิตไฟล์ SVG ที่มีเวกเตอร์บางส่วนและเนื้อหาบิตแมปบางส่วน

— Randall Whitman

CutyCapt มีอยู่ในที่เก็บแบบ canonical บน ubuntu 18.04 ดังนั้นsudo apt install cutycaptทั้งหมดที่ฉันต้องทำคือลองทำ ด้วยความล่าช้าสองสามวินาที ( --delay=3000) มันยังแสดงผลให้ mathjax !!!

— cheshirekow

0

วิธีการหนึ่ง: หากคุณถ่ายภาพหน้าจอแรสเตอร์ (PNG, JPG และอื่น ๆ ) คุณสามารถใช้ "ติดตามบิตแมป" ใน Inkscape เพื่อ "แปลง" ฟิลด์ของสีที่เกี่ยวข้องบางอย่างในภาพหน้าจอเป็นวัตถุเวกเตอร์ ฉันแน่ใจว่ามีเครื่องมือที่เทียบเท่าใน Adobe Illustrator ดูแลด้วยจำนวนสีที่คุณระบุเพื่อติดตาม - ไฟล์เวกเตอร์ที่ได้สามารถเติบโตได้อย่างรวดเร็ว แต่ละสีเป็นวัตถุเวกเตอร์แยกที่ซ้อนทับวัตถุสีอื่นเพื่อแสดงภาพแรสเตอร์ดั้งเดิมดังนั้นคุณอาจต้องล้างข้อมูลบางอย่าง

— อดัมเคค
แหล่งที่มา

1

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

— SPRBRN

-1

สิ่งนี้อาจช่วยคุณได้ มีดี add-on ของ Firefox คือเรียกว่าบันทึกเป็น PDF ซึ่งใช้เครื่องมือจากhttps://pdfcrowd.com/ สำหรับผลลัพธ์ SVG ขั้นสุดท้ายฉันจะใช้หนึ่งในเครื่องมือออนไลน์เพื่อแปลงเป็น SVG

— Petr S.
แหล่งที่มา