변환 된 CSS3 요소를 캔버스/이미지로 렌더링

Question

기본적으로 내 페이지의 특정 DOM 요소를 이미지로 저장하고이를 서버에 저장하고 사용자가 이미지를 로컬 디스크에 저장할 수있게하려고합니다. 이 작업을 수행하는 유일한 방법은 현재 AJAX를 통해 이미지 데이터를 보내고 DOM에 이미지 요소를 만들 수있는 캔버스를 렌더링하는 것입니다. 그러나 나는 내 DOM 요소는

CSS를 3 차원

을 tranforms 그리고 html2canvas 단순히이 실패

1. 여러 투명 배경을 가지고, 이것에 대한 promising library을 발견했다. 현재 CSS 요소가있는 DOM 요소의 현재 상태에 대한 이미지 표현을 깔끔하게 저장할 수있는 방법이 있습니까?

Answer 1

브라우저는 DOM 요소를 캔버스처럼 렌더링하지 못하게 할 수 있습니다. 그 이유는 매우 위험한 보안상의 우려가 있기 때문입니다.

가장 좋은 방법은 html2canvas와 자신의 해킹입니다. 사용자 정의 된 방식으로 자체 렌더링 코드를 구현하기 만하면됩니다. drawImage 호출로 여러 배경을 처리 할 수 ​​있어야하며 캔버스 2D가 setTransform()이되면 css3 변환으로 작업 할 수 있습니다 (이는 차세대 버전에만 해당됨).

Answer 2

CSS3 개발 및 크로스 브라우저 지원의이 단계에서는 자신의 html2canvas 확장 프로그램을 작성하지 않으면이 기능을 사용할 수 없습니다.

웹 페이지의 현재 스냅 샷을 보낼 수 있도록 Google Chrome 버그 신고자에게 문의 할 수 있습니다. 하지만 JS API에서는 사용할 수없는 내부 기능이라고 생각합니다.

또한 사용자를 염탐하기 위해 쉽게 악용 될 수 있으므로 브라우저 개발 팀의 공식 지원은 필요하지 않습니다.