이전에는 다른 스크린샷 도구를 통해서만 이미지를 캡처할 수 있었습니다. 최신 브라우저의 기능은 점점 더 강력해졌습니다. H5의 점진적인 대중화로 인해 브라우저 자체에서 스크린샷을 찍을 수 있게 되었습니다. html2canvas는 그러한 프런트엔드 플러그인이며 그 원리는 Canvas에 Dom 노드를 그리는 것입니다. 매우 편리하지만 다음과 같은 제한 사항이 있습니다.
제 사용 시나리오는 매우 간단해서 예외 정보를 기록하고, 예외 페이지도 직접 정의하므로 html2canvas만 사용해도 충분합니다.
처음 html2canvas를 사용했을 때 목적은 전체 페이지의 스크린샷을 찍어 사용자가 저장할 사진을 생성하는 것이었습니다.
먼저 HTML 렌더링이 어떤 모습인지 살펴보겠습니다.
HTML로 렌더링된 이미지를 보면 위의 이미지는 둥근 모서리 효과가 있는 것을 알 수 있는데, html2canvas를 사용하여 이미지를 변환해 보니 이미지의 둥근 모서리 효과가 실패하지 않는 것을 발견했습니다.
이렇게 되었습니다. 여러 가지 해결 방법을 고민한 끝에, 뒷면의 둥근 모서리를 배경 이미지로 만들기로 결정했습니다. 가운데 원의 배경은 투명하게 한 후, 마스크에 해당하는 절대 위치 지정을 통해 원본 이미지 위에 겹쳐 놓았습니다. 효과.
물론 마스크 이미지의 DOM 노드는 다음과 유사하게 둥근 모서리가 필요한 이미지 아래에 있어야 합니다.
<div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--둥근 모서리가 필요한 원본 이미지--> <img src=/template/images/avatar .png class=img-반응형 스타일=위치: 절대;><!--마스크 이미지--></div>
일단 생성되면 정상적으로 보일 것입니다.
<div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--둥근 모서리가 필요한 원본 이미지--> <img src=/template/images/avatar .png class=img-반응형 스타일=위치: 절대;><!--마스크 이미지--></div>코드 복사