html2canvas를 사용하여 브라우저 스크린샷을 구현하는 작업은 서버 환경에서 구현되어야 합니다.
효과html2canvas는 순수 JS를 통해 브라우저 측에서 스크린샷을 찍을 수 있지만, 스크린샷의 정확도를 향상시켜야 하고 일부 CSS는 인식할 수 없어 원래 화면 스타일을 캔버스에 완벽하게 표현할 수 없습니다.
/*여러 줄의 오버플로는 생략할 수 없습니다.*/ .book_inf{ position:relative;overflow:hidden; -webkit-line-clamp; : 2; - 웹킷-박스-방향: 수직 } 지원되는 브라우저 /*매개변수: * #screenshots 필요한 스크린샷의 요소 ID, 스크린샷 촬영 후 실행될 함수, * backgroundColor 구성 항목 배경색 * canvas는 스크린샷 촬영 후 반환되는 마지막 캔버스입니다. */function 스크린샷Img(){ html2canvas (document.querySelector( #screenshots),{ backgroundColor: 'transparent',//배경을 투명하게 설정}).then(canvas => { canvasTurnImg(canvas) //저장된 이미지 포맷 변환 방법}) } 사용 가능한 구성 항목| 매개변수 이름 | 유형 | 기본값 | 설명하다 |
|---|---|---|---|
| 허용테인트 | 부울 | 거짓 | 교차 출처 이미지가 캔버스를 오염시키는 것을 허용할지 여부---교차 출처 허용 |
| 배경 | 끈 | #fff | DOM에 아무것도 지정되지 않은 경우 캔버스 배경색 투명에 대해 정의되지 않은 상태로 설정---캔버스 배경색, 기본 흰색이 설정되지 않은 경우 이는 트랩이므로 backgroundColor로 변경했습니다. |
| 키 | 숫자 | null | 캔버스 높이를 픽셀 단위로 정의합니다. null인 경우 창의 전체 높이로 렌더링됩니다.---캔버스 높이 설정 |
| 편지렌더링 | 부울 | 거짓 | 각 문자를 별도로 렌더링할지 여부입니다. letter-spacing을 사용하는 경우 필요합니다.---문자 간격을 설정한 경우 유용합니다. |
| 벌채 반출 | 부울 | 거짓 | 콘솔에 이벤트를 기록할지 여부---console.log()에 정보 출력 |
| 대리 | 끈 | 한정되지 않은 | 교차 출처 이미지를 로드하는 데 사용되는 프록시에 대한 URL입니다. 비워두면 교차 출처 이미지가 로드되지 않습니다.---프록시 주소 |
| tainTest | 부울 | 진실 | 각 이미지를 그리기 전에 캔버스를 오염시키는 경우 테스트할지 여부---렌더링하기 전에 이미지를 테스트할지 여부 |
| 시간 초과 | 숫자 | 0 | 이미지 로드 시간 초과(밀리초). 0으로 설정하면 시간 초과가 발생하지 않습니다.---이미지 로드 지연, 기본 지연은 0(밀리초)입니다. |
| 너비 | 숫자 | null | 캔버스 너비를 픽셀 단위로 정의합니다. null인 경우 창의 전체 너비로 렌더링됩니다.---캔버스 너비 |
| 사용CORS | 부울 | 거짓 | 프록시-교차 원본 프록시로 다시 되돌리기 전에 CORS가 제공되는 원본 간 이미지 로드를 시도할지 여부 |
1. 캔버스에서 직접 이미지 메타데이터 추출
// 이미지를 png 형식으로 내보내기 var type = 'png' var imgData = canvas.toDataURL(type);
2. 브라우저가 직접 다운로드하도록 하려면 mime 유형을 image/octet-stream으로 변경하십시오.
/** * mimeType 가져오기 * @param {String} 이전 MIME 유형을 입력합니다 * @return 새 MIME 유형을 반환합니다 */var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i , 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r;}; 데이터, 교체 MIME typeimgData = imgData.replace(_fixType(type),'image/octet-stream');3. 이미지를 로컬에 다운로드
/** * 로컬에 파일 저장 * @param {String} data 로컬에 저장할 이미지 데이터 * @param {String} filename 파일 이름 */var saveFile = function(data, filename){ var save_link = document.createElementNS ('http ://www.w3.org/1999/xhtml', 'a'); save_link.href = 데이터; save_link.download = 파일명; document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); event);}; // 다운로드된 파일 이름 var filename = 'baidufe_' + (new Date()).getTime() + '.' downloadsaveFile(imgData,파일명);사례
사례
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.