HTML 캔버스 구현 스크린 샷을 기반으로합니다

JS 기반 스크린 샷 솔루션을 설명하면서 모든 사람을 공유하는 것을 기억합니다. 이번에는 모든 사람과 공유한다는 아이디어를 쓸 계획입니다. 이것은 매우 간단한 작은 데모입니다. 버그가 있으면 언급하십시오. 일반적인 PO 코드 주소에 따라.

렌더링

전반적인 사고

• 시작/종료 단축키 키를 설정하십시오
• 시작 후 DOM은 원래 DOM 인터페이스를 덮기 위해 캔버스로 끌려갑니다.
• 캔버스 시뮬레이션 마우스 스크린 샷 영역을 추가하십시오
• 마우스 스크린 샷 영역에 해당하는 브라우저 인터페이스를 그려 캔버스를 추가하십시오 (첫 번째 캔버스에서 가로 채기)
• 차단 된 이미지를 저장하십시오

바로 가기 키가 충돌을 일으킬 수 있으므로 바로 가기 키는 바로 가기 키의 수를 제한 할 수 없으므로 첫 번째 매개 변수의 배열 형태가 전달됩니다.

 함수 스크린 샷 (QuickStartKey, Endkey) {// 호환성 사용하지 마십시오 ... Extended String var kyylength = QuickStartKey.length var waskeytrigger = {} var cantshot = false ... Q UickStartKey. 트래버스 매개 변수 배열 ISKeyTrigger [item] = false // 기본 배열의 모든 키는 트리거되지 않습니다}) $ ( 'keyup', function (e) {var keycode = e. = = endkey) {...} else if (! cantStartShot) {iskeytrigger [keycode] = true var nottrigger = 객체. 트리거하려면}) if (nottrigger.length === 0) {// 트리거 해야하는 바로 가기 키가 없습니다.

기본 방법을 채택하는 경우 MDN에서 DOM의 도입을 참조 할 수 있습니다. 가장 까다로운 것은 XML을 포함하는 SVG 이미지와 관련된 요소를 만들어야한다는 것입니다. 현재 브라우저에 표시된 DOM을 계산하고 추출하는 방법은 실제로 가장 지루합니다. 실제로 저자는 하나 =를 수동으로 구현하는 것이 좋지 않습니다. =, 그래서 나는이 html2canvas 라이브러리를 선택하여 이것을 완료했습니다. 일반적인 호출 방법은 다음과 같습니다.

 function beginshot (cantstartShot) {if (cantStartShot) {html2canvas (document.body, {onrendered : function (canvas) {// 캔버스 이미지를 동일한 인터페이스}}}}}}}}}}}.

이 장소의 실현은 원래 캔버스 피를 사용하기위한 것이었지만 마우스를 눌러 드래그를 시작한 후 현재 스크린 샷 상자를 그려야합니다. MouseMove가 트리거 될 때 삭제됩니다. 실시간 드로잉 프로세스를 시뮬레이션합니다. 무력한 저자는 캔버스 네이티브 API를 사용하는 방법을 찾지 못했습니다. 여기서 저자는 jcanvas라는 JQ 기반 캔버스 라이브러리를 사용하여 레이어의 개념, 즉 레이어에 그림을 그릴 수 있으며 동시에 레이어 이름을 표시 할 수 있습니다. 이것은 저자의 요구를 충족하며 실현은 다음과 같습니다.

 $ ( '#' +canvasid) .mousedown (function (e) {$ (# +canvasid) .removelayer (layername) // 이전 레이어 layername += 1 startx = 1 startx = that.x // 계산 마우스 위치 Starty = that._calculatingxy (e) .y isshot = true $ (#+canvasid) .addlayer ({type : 'lectangle', // 직사각형 ... 이름 : layname, the startx, y : Warty, 너비 : 1, 높이 : 1})). = that._calculatingxy (e) .y var width = movex -startx var height = movey -starty $ (#+canvasid) .addlayer ({type : 'rectangle', ... lay : lay ername, fromcenter : false , x : startx, y : 스타일, 너비 : 높이 : 높이}) $ (#+canvasid).

 var canvasresult = docum너 , 0, 0, 너비, 높이) var dataurl = canvasresult.todataurl (image/png);

그중에서도 이미지는 DrawImage에 의해 가로 채고 이미지는 Todataurl 방법을 사용하여 Base64 인코딩으로 변환되었습니다.

 함수 다운로드 (el, filename, href) {el.attr ({ 'download': filename, 'href': href})} ... downloadfile ($ ( '. ok'), 'screenshot' + math .random ( .random () .tring ().

그중에서도 A 태그의 다운로드 속성은 사용자가 클릭 할 때 직접 다운로드 할 수 있습니다.

 매 jcanvas.min.js> </script> <script src = https : //cdn.bootcss.com/html2canvas/0.5.0-html2canvas.min.js> </script>

 스크린 샷 ([16, 65], 27) // 바로 가기 키를 Shift+A로 시작하십시오

이 기사에서 가장 역겨운 장소 (DOM은 캔버스 및 캔버스 설정 레이어로 씁니다)는 각각 구현을 위해 두 개의 라이브러리를 사용합니다. 여전히 조금이라. 본질

위는이 기사의 모든 내용입니다.