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


31

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

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

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

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


ดูเหมือนว่า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


ฉันลอง 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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.