Có thể chụp ảnh màn hình của một trang web dưới dạng hình ảnh SVG không?

31

Tôi có một trang web hoàn toàn dựa trên vector (văn bản, phông chữ biểu tượng, SVG, nhưng không có PNG, JPEG hoặc GIF).

Có cách nào để chụp ảnh màn hình vector của trang web đó và lưu nó dưới dạng tệp SVG có thể mở rộng hoàn toàn không?
(để tôi có thể chụp ảnh màn hình trên một PC bình thường và nó trông đẹp trên võng mạc)

Điều này nên có thể, nhưng tôi không thể tìm thấy bất cứ điều gì sẽ làm điều đó.

Tín dụng bổ sung: Nếu nó có một vài hình ảnh bitmap, tôi muốn có một SVG với bitmap nhúng.

html screenshot svg

— SLaks
nguồn

Có vẻ như html2canvas.hertzen.com có thể giúp đỡ ở đây.

— SLaks

1

tập tin .html trong câu hỏi không thực sự là những gì bạn muốn?

— Sparr

@Sparr: Không; Tôi muốn thao tác SVG trong một trình soạn thảo (ví dụ: cắt nó, thêm một biểu ngữ), sau đó đặt nó vào trong <img>. (dành cho trang trợ giúp / tham quan của ứng dụng web)

— SLaks

Các tệp PNG hoặc JPEG sẽ được chuyển đổi thành SVG như thế nào?

— HairOfTheDog

7

Đây là một ý tưởng hữu ích tuyệt vời. Đặc biệt là đối với các nhà thiết kế UI, những người phải làm việc trên các trang web hiện có. Tôi sẽ trả tiền cho một công cụ có tính năng xuất khẩu SVG vì tôi ghét làm việc trên các mô hình với phần mềm bitmap, đây là một điều hoàn toàn vô nghĩa.

— smonff

10

Không hoàn toàn là một ảnh chụp màn hình, nhưng nếu trang in tốt, bạn có thể in nó dưới dạng PDF. Cả Inkscape và Illustrator sẽ tải một tệp PDF (và lưu nó dưới dạng SVG nếu cần).

— Dân
nguồn

Khi tôi thử điều này, Firefox đã in các nút radio bitmap sang tệp PDF. Trình duyệt Chromium và wkhtmltopdf đã tạo các tệp vectơ.

— Randall Whitman

9

CSSBox WebVector sẽ chuyển đổi các trang HTML sang SVG. Đây là một ứng dụng dòng lệnh java và bạn có thể xem một mẫu đầu ra của nó ở đây .

— Andrew
nguồn

Cả hai chế độ dòng lệnh và GUI trên thực tế. Tôi đã thử WebVector để xuất sang SVG một dạng HTML nhỏ có chứa các nút radio. Nó tạo ra một tệp SVG chứa hoàn toàn nội dung vectơ, như mong muốn - không có nội dung bitmap nhúng. Các nút radio được hiển thị dưới dạng hình vuông, trông giống như các hộp kiểm của kết xuất thông thường.

— Randall Whitman

2

Điều này đã được trả lời tại Chụp ảnh màn hình trang web lớn trong Chrome

Tôi sẽ sử dụng CutyCapt để nó kết xuất đồ họa của webkit thành hình ảnh.

CutyCapt là một tiện ích dòng lệnh đa nền tảng nhỏ để thu thập kết xuất trang web của WebKit thành nhiều định dạng vector và bitmap, bao gồm SVG, PDF, PS, PNG, JPEG, TIFF, GIF và BMP. Xem IECapt để biết công cụ tương tự dựa trên Internet Explorer.

— chx
nguồn

Tôi đã thử CutyCapt để xuất sang SVG một dạng HTML nhỏ có chứa các nút radio. Nó tạo ra một tệp SVG chứa một phần nội dung vector và một phần bitmap.

— Randall Whitman

CutyCapt có sẵn trong kho lưu trữ chính tắc trên Ubuntu 18.04, vì vậy đó sudo apt install cutycaptlà tất cả những gì tôi cần làm để thử nó. Với một vài giây chậm trễ ( --delay=3000) nó thậm chí còn biểu hiện mathjax !!!

— cheshirekow

0

Một cách tiếp cận: Nếu bạn chụp ảnh màn hình raster (PNG, JPG, v.v.), thì bạn có thể sử dụng "Trace Bitmap" trong Inkscape để "chuyển đổi" các trường có màu liên quan nhất định trong ảnh chụp màn hình sang các đối tượng vector. Tôi chắc chắn có một công cụ tương đương trong Adobe Illustrator. Cẩn thận với bao nhiêu màu riêng biệt bạn chỉ định để theo dõi - các tệp vectơ kết quả có thể phát triển phức tạp nhanh chóng. Mỗi màu là một đối tượng vector riêng biệt chồng lên các đối tượng màu khác để thể hiện hình ảnh raster ban đầu, do đó bạn có thể sẽ cần phải làm sạch.

— Adam Keck
nguồn

1

Điều này sẽ mất rất nhiều công sức để có được các cài đặt chính xác, tôi không nghĩ rằng điều này sẽ được chấp nhận. Nhưng bạn không bao giờ biết. Adobe Flash cũng có thể làm điều này và có cách làm khác, có thể có kết quả tốt hơn hoặc xấu hơn.

— XUÂN

-1

Điều này có thể giúp bạn. Có một tiện ích bổ sung tuyệt vời cho Firefox, được gọi là Save as PDF, sử dụng các công cụ từ https://pdfcrowd.com/ . Đối với đầu ra SVG cuối cùng, sau đó tôi sẽ sử dụng một trong những công cụ trực tuyến để chuyển đổi sang SVG.

— Petr S
nguồn