프런트 엔드는 원 클릭 스크린 샷 기능을 어떻게 실현합니까?

멋진 리뷰

머리말

웹 스크린 샷 기능은 특히 온라인 교육 분야에서 매우 일반적인 요구 사항입니다. 우리 친구 서클의 WeChat 포스터 및 이벤트 포스터는 일반적으로 운영 / 마케팅 담당자가 디자인 도구를 통해 디자인하지만 자신에게 더 잘 매핑하는 방법은 H5 페이지와 같은 서비스 시스템에는 더 많은 정보 수집 및 상호 작용 기능이 이식되어 있으며이 응용 프로그램 탐색, 페이지 스크린 샷은 매우 좋은 솔루션입니다.

다음으로, 한 번의 클릭으로 웹 페이지를 기반으로 페이지 포스터를 생성하는 방법을 검토하고이 기능을 작성자의 오픈 소스 프로젝트 H5-Dooring에 통합하여 편집자에게 권한을 부여합니다.

본문

특정 기능을 구현하기 전에 특정 구현 효과를 살펴 보겠습니다.

데모를 통해 궁극적 인 목표는 PC 측에서 H5 페이지의 스크린 샷을 생성하는 것이므로 다음 문제가 관련 될 수 있습니다.

페이지를 그림으로 변환하는 방법
H5 효과 시뮬레이션을 실현하고 실제 H5 페이지를 가로채는 방법

우리는 먼저 아이디어의 실현에 대해 생각할 수 있습니다. 어떻게 DOM을 기반으로 그림으로 변환 할 수 있습니까?이 기술은 또한 일반적인 주제이며 캔버스로 구현할 수 있다는 것을 모두 알고 있으며 일반적인 프로세스는 다음과 같습니다.

기본 구현 방식을 사용하는 경우 일반적으로 위의 단계를 거쳐야합니다. 두 번째 단계는 키 링크이며 가장 복잡한 단계입니다. dom에서 캔버스로 매핑을 수동으로 구현하고 마지막으로 표준 캔버스 그리기 개체로 변환해야합니다. 물론 기성품입니다. html2canvas, dom-to-image와 같이이 단계를 단순화하는 데 직접적으로 도움이되는 많은 라이브러리가 있습니다. 다음으로 첫 번째 문제를 해결하겠습니다.

페이지를 그림으로 변환하는 방법

저자는 html2canvas 라이브러리를 직접 조사하고 사용하는 과정에서 if % 단위가 스타일에 나타나거나 그림의 배경에 문제가있어 html2canvas가 제대로 작동하지 않고 렌더링 감소 및 선명도와 같은 많은 문제를 발견했습니다. 문제가있어 저자는 당분간 심도있는 연구를하지 않았다. (그러나 이러한 문제는 라이브러리 자체를 수정하여 해결할 수있다.) 나중에 저자가 직접 dom-to-image를 사용하여 사용이 매우 간단하고 위에서 언급 한 문제가 거의 없음을 알게되었다. 따라서 저자는 단호하게 dom-to-image를 채택했습니다. 라이브러리의 소스 코드를 읽은 후 글쓰기도 매우 우아하고 이해하기 쉽다고 느낍니다. 2 차 개발은 나중에 큰 문제가되지 않아야합니다. 공식 웹 사이트의 기본 사용을 살펴볼 수 있습니다.

// 引入
import domtoimage from 'dom-to-image';

// 生成图片
domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

사용법도 매우 간단하며 유연하게 구성 할 수있는 충분한 구성 항목을 제공합니다.

첫 번째 문제는 이런 식으로 해결되지만 사용 중에 사진이 흐려지는 문제가 발견됩니다.이 인터넷에도 여러 가지 해결 방법이 있습니다. 예를 들어 먼저 dom을 확대하고 캔버스로 처리 할 때 축소하고 마지막으로 사진을 생성합니다. 하나 하나 예를 들어주지 않겠습니다.

H5 효과 시뮬레이션을 실현하고 실제 H5 페이지를 가로채는 방법

우리가 디자인 한 H5 페이지는 모두 PC 측에서 완성 되었기 때문에 H5 미리보기 이미지를 생성하려는 경우 렌더링을위한 로컬 시뮬레이션 크기에 지나지 않습니다. 구체적인 계획은 다음과 같습니다.

iframe을 H5 페이지 컨테이너로 사용하여 스크린 샷 생성
너비를 직접 제한하여 현재 페이지에 스크린 샷을 생성합니다.
서버 크롤러를 사용하여 휴대폰 액세스를 시뮬레이션하여 스크린 샷 생성

위에서 언급 한 모든 솔루션을 시도해 볼 수 있습니다. 작성자는 이전에이 문제를 해결하기 위해 크롤러 애플리케이션을 오픈 소스로 제공했습니다. 관심이 있으시면 연구하고 이해할 수 있습니다. 분명히 데모에서와 같이 구현할 첫 번째 솔루션을 선택합니다. 우리가 본 팝업 창의 H5는 실제로 iframe에서 렌더링됩니다. 실현 아이디어가 있고 문제가 잘 실현되었습니다. iframe이로드 될 때와 같이 상위 페이지와 iframe 간의 메시지 통신 만 구현하면됩니다. 그런 다음 직접 인터셉트하도록 iframe에 수동으로 알립니다. 기본 구현 코드는 다음과 같습니다.

// 编辑器页面, 也就是父页面
// 定义截图子页面句柄函数
window.getFaceUrl = (url) => {
  setFaceUrl(url)
  setShowModalIframe(false)
}

// iframe页面, 也就是预览页面
const generateImg = (cb:any) => {
    domtoimage.toBlob(refImgDom.current, 
      {
        width,
        height,
      }
    )
    .then(function (blob:Blob) {
        const formData = new FormData();
        formData.append('file', blob, 'tpl.jpg');
        req.post('/files/upload/free', formData).then((res:any) => {
          cb && cb(res.url)
        })
    })
    .catch(function (error:any) {
        console.error('oops, something went wrong!', error);
    });
}

// 触发父页面的方法,将图片传给父页面
generateImg((url:string) => {
  parent.window.getFaceUrl(url);
})

마침내

위 튜토리얼의 저자는 H5-Dooring에 통합되었으며, 좀 더 복잡한 인터랙티브 기능의 경우 합리적인 디자인을 통해 구현할 수 있으며 혼자서 탐색하고 공부할 수 있습니다.

github 검색 : H5-Dooring

H5 게임, 웹팩, 노드, gulp, css3, javascript, nodeJS, 캔버스 데이터 시각화 및 기타 프런트 엔드 지식과 실제 전투에 대해 더 배우고 싶다면 "Interesting Frontend"에서 함께 공부하고 토론하여 프런트 엔드 경계를 함께 탐색하십시오.