최근에 전체 비정상 정보 레코드를 해결하기 위해이 프로젝트는 브라우저의 전체 화면 스크린 샷 기능을 연구하여 사용자가 비정상을 찾을 때 스크린 샷을 신속하게 스크린 샷으로 보낼 수 있습니다. 최종 레코드에 기록 된 궁극적 인 정보는 다음과 같습니다.
html2canvas 소개과거에는 다른 스크린 샷 도구를 통해서만 이미지를 가로 채실 수있었습니다. 현대식 브라우저의 기능은 H5의 점진적인 대중화로 더욱 강해졌습니다. HTML2Canvas는 전면 -엔드 플러그 인이며, 그 원칙은 캔버스에 DOM 노드를 그리는 것입니다. 편리하지만 다음과 같은 한계가 있습니다.
내 사용 시나리오는 간단하기 때문에 혼자서 정의되며 비정상적인 페이지도 혼자서 정의되면 html2canvas는 충분합니다.
인스턴스를 사용하십시오견적 jQuery, html2canvas를 사용할 수 있으며 코드는 간단합니다. 여기에서 html2canvas 0.5.0 버전을 사용합니다
html2canvas (#tbl_exception), {onrendered : function (canvas) {var url = canvas.todataurl (); pngto (body);첫 번째 매개 변수는 스크린 샷에 대한 DOM 객체이며, 두 번째 매개 변수는 복구 캔버스 후에 렌더링됩니다.
| 이름 | 유형 | 기본 | 설명 |
|---|---|---|---|
| 허용 | 부울 | 거짓 | 크로스 오리핀 이미지가 캔버스를 오염시킬 수 있는지 여부 |
| 배경 | 끈 | #fff | 캔버스 배경색, DOM에서는 정의되지 않은 상태로 설정되어 있습니다 |
| 키 | 숫자 | 널 | 캔버스의 히 그를 픽셀로 정의하십시오. |
| 레터링 | 부울 | 거짓 | 각 문자를 별도로 렌더링해야합니다. |
| 벌채 반출 | 부울 | 거짓 | 콘솔에서 이벤트를 기록할지 여부. |
| 대리 | 끈 | 한정되지 않은 | 프로젝트에 대한 URL은 크로스 오리핀 이미지를로드하는 데 사용됩니다. |
| 테일 테스트 | 부울 | 진실 | 캔버스를 그리기 전에 각각의 이미지를 테스트할지 여부 |
| 시간 초과 | 숫자 | 0 | 이미지를로드하기위한 시간 초과, 밀리 초로 설정하면 시간 초과가 없습니다. |
| 너비 | 숫자 | 널 | 캔버스의 너비를 픽셀로 정의하십시오. |
| USECORS | 부울 | 거짓 | 교차 오리핀 이미지를 CORS Servad로로드하려고할지, proxyy로 되돌아 가기 전에 |
소개 한 후, 사용에서 발생한 문제에 대해 이야기 할 때 스크린 샷은 현재 화면의 내용 만 차단할 수 있습니다. 플러그 인 소스 코드 및 디버깅을 확인한 후 솔루션을 찾으십시오. 소스 코드와 수정 된 코드를 아래에 넣으십시오
소스 코드 :
renderdocument (node.ownerDocume, 옵션, node.ownerDocument.defaultView.innerWidth, node.ownerDocumew.innerHeight, inde x) {ifof (type.onrendered) === function) {log ) (옵션. 온 렌더링은 html2canvas return이 캔버스를 포함하는 약속입니다.코드 수정 :
// 2016-02-18 소스 코드는 var width.width를 지원하기 위해 사용자 정의 너비를 추가 할 수없는 매개 변수를 수정합니다 = node.ownerDocument.defaultView.innerHeight (node.ownerDocument, 옵션) {ifof (옵션 ) {log (Options.Onrendered는 더 이상 사용되지 않습니다.주로 호출 방법은 다음과 같이 DOM 객체의 너비와 높이를 사용자 정의 할 수 있습니다
$ (#btn_screen) .on (click, function () {html2canvas ($ (#tbl_exception), {height : $ (#tbl_exception) .outerheight () + 20, onrender : fuins. (canvas) {var url = canvas. todataurl (); // var triggerdownload = $ (<a>) .attr (download, getnowformatdate ()+异常信息 .png); [0] .Click (); remove ();}); 요약프론트 엔드 플러그인을 통해 브라우저의 전체 스크린 샷 기능이 구현됩니다 모두의 학습. 나는 모두가 Vevb wulin.com을 지원하기를 바랍니다.