웹 트래픽의 엄청난 양 (특히 소셜 미디어의 경우)은 웹 브라우저의 스크린 샷으로 구성됩니다. 여기에는 일반적으로 일부 서식있는 텍스트, 일부 레이아웃 및 일부 비트 맵/벡터 그래픽이 포함됩니다. 예,웹 브라우저를위한 시맨틱 스크린 샷

그것은 소요 시간 및 스크린 샷을 공유하는 정말 쉽습니다하지만 유용한 정보를 많이 멀리 던져 스크린 리더 같은 것들에 훨씬 덜 의무가있는 언급 (장치 사이에 잘 전달되지 않는다 맹목적이고 멋진 데이터 마이닝 용). 물론 HTML/SVG는 이러한 데이터를 표현하기에 완벽한 형식이며, 바로 거기에 있어도 사용하지 않습니다.

html2canvas은 이미지를 제대로 처리하지 못하지만 일부 반 관련 토론 here을 참조하십시오.

제 질문은 브라우저에서 보이는 영역을 선택하고 텍스트와 이미지를 보존하는 형식 (이상적으로는 HTML)으로 저장하고 별도로 렌더링 할 때 대략 비슷한 것으로 렌더링하는 방법은 무엇입니까? (이를 공유하기 위해 예를 들어 데이터 iframe으로 포함 할 수 있도록).

이것은 일반적으로 불가능하며 HTML 렌더링은 복잡한 작업이지만 브라우저에 "이 픽셀 좌표 내에서 어떤 요소가 렌더링되는지"와 같은 질문을 할 수 있어야한다고 생각합니다.

출처

2016-11-01 Sean D

가능한 납 : [도구 선택적으로 복사하는 HTML + CSS + JS ..] (http://stackoverflow.com/q/4911338/5496966) 링크 @AnkithAmtange에 대한 – AA2992

덕분에, 내가 가진 모습과 모든 도구가 DOM 요소를 선택하는 것처럼 보입니다. 따라서 "스크린 샷"을 얻으려면 그 위에 무엇인가해야합니다. 그러나 좋은 출발점입니다. –

PhantomJS가이를 수행 할 수 있습니다 (http://phantomjs.org/screen-capture.html 참조). 어떻게 든 확장 기능으로 랩핑해야 할 것입니다. 그러나 이와 같은 것이 매우 유용하다고 생각하지는 않습니다. 이미지는 모든 장치에서 동일하게 렌더링되며 텍스트를 추출하려는 경우 OCR 도구로 쉽게 작업을 수행 할 수 있습니다. 나는 http://www.onlineocr.net/을 통해 당신의 이미지를 돌리고 대부분의 텍스트를 얻었다. –

첫째 :

오른쪽 페이지를 클릭 한 후 "다른 이름으로 저장 페이지"를 클릭합니다.
일부 시나리오에서는 .html (또는 .webarchive)으로 끝나는 이름으로 저장하십시오. 어떤 것이 가장 적합한 지 확인하십시오.
지금 저장 한 html 파일을 원하는 부분 만 편집하여 편집하십시오 (텍스트 편집기를 사용할 수 있습니다. 일반적으로 Sublime Text와 Atom이 제안됩니다). 그런 다음

:

당신은 최대 무엇인지 확인하기 위해서는 브라우저에서 열 수 있습니다.
CSS가있는 위치를 검사하여 HTML 파일 폴더에서 가져 와서 HTML 파일을 링크하여 스타일을 보존 할 수 있습니다.

는 지금까지 내가 이해, 당신은 하나의 파일로 업로드 할 수 있도록, 적어도, HTML 파일의 <head> 섹션에서 인라인으로 모든 CSS를 가지고, 또는 싶어 CSS 파일에 연결하지 않아도됩니다.

출처

2016-11-10 00:01:08

질문을 불분명하게 적어 두지 않으면 죄송합니다. 그러나 이것은 제가 의도 한 바가 아닙니다. –

@SeanD 편집하십시오. –

웹 브라우저를위한 시맨틱 스크린 샷

답변

첫째 :

:

관련 문제