htmltoimage 다운로드 - htmltoimage 소스 코드 다운로드

htmltoimage

기타 소스코드

rc-0.1

다운로드

HTML을 이미지로

HTML5 캔버스와 SVG를 사용하여 DOM 노드에서 이미지를 생성합니다.
유지 관리가 더 쉬운 코드와 몇 가지 새로운 기능을 사용하여 DOM에서 이미지로 포크합니다.

설치하다

 npm install --html을 이미지로 저장

용법

 /* ES6 */import * as htmlToImage from 'html-to-image';import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';/* ES5 */var htmlToImage = require(' html을 이미지로');

모든 최상위 수준 함수는 DOM 노드 및 렌더링 옵션을 허용하고 해당 dataURL로 이행된 약속을 반환합니다.

toSvg
toPng
toJpeg
toBlob
toPixelData

다음 예를 살펴보세요.

PNG 이미지 base64로 인코딩된 데이터 URL을 가져와서 즉시 표시합니다.

 var node = document.getElementById('my-node');htmlToImage.toPng(node)
  .then(function (dataUrl) {var img = new Image();img.src = dataUrl;document.body.appendChild(img);
  })
  .catch(function (error) {console.error('앗, 문제가 발생했습니다!', error);
  });

PNG 이미지 base64로 인코딩된 데이터 URL을 가져오고 다운로드합니다(다운로드 사용).

 htmlToImage.toPng(document.getElementById('내 노드'))
  .then(function (dataUrl) {download(dataUrl, 'my-node.png');
  });

PNG 이미지 Blob을 가져와 다운로드합니다(FileSaver 사용).

 htmlToImage.toBlob(document.getElementById('내 노드'))
  .then(함수 (blob) {window.saveAs(blob, 'my-node.png');
  });

압축된 JPEG 이미지 저장 및 다운로드:

 htmlToImage.toJpeg(document.getElementById('my-node'), { 품질: 0.95 })
  .then(function (dataUrl) {var link = document.createElement('a');link.download = 'my-image-name.jpeg';link.href = dataUrl;link.click();
  });

SVG 데이터 URL을 가져오되 모든 <i> 요소를 필터링하세요.

 함수 필터(노드) {
  return (node.tagName !== 'i');}htmlToImage.toSvg(document.getElementById('my-node'), { 필터: 필터 })
  .then(function (dataUrl) {/* 뭔가를 하세요 */
  });

픽셀의 RGBA 데이터를 나타내는 4개의 배열 요소마다 원시 픽셀 데이터를 Uint8Array로 가져옵니다.

 var node = document.getElementById('my-node');htmlToImage.toPixelData(node)
  .then(함수 (픽셀) {for (var y = 0; y < node.scrollHeight; ++y) { for (var x = 0; x < node.scrollWidth; ++x) {pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);/* pixelAtXY는 (x, y) 0..255 범위 */pixelAtXY = pixel.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
  });

HTMLCanvasElement를 가져와서 즉시 표시합니다.

 htmlToImage.toCanvas(document.getElementById('my-node'))
  .then(함수 (캔버스) {document.body.appendChild(캔버스);
  });

옵션

필터

DOM 노드를 인수로 취하는 함수입니다. 전달된 노드가 출력에 포함되어야 하는 경우 true를 반환해야 합니다. 노드를 제외한다는 것은 해당 노드의 자식도 제외한다는 의미입니다.

루트 노드에서는 호출되지 않습니다.

배경색상

배경색의 문자열 값, 유효한 CSS 색상 값.

너비, 높이

렌더링하기 전에 노드에 적용할 너비와 높이(픽셀)입니다.

스타일

렌더링하기 전에 속성을 노드 스타일에 복사할 개체입니다. CSS 속성의 JavaScript 이름에 대한 이 참조를 확인하고 싶을 수도 있습니다.

품질

JPEG 이미지의 이미지 품질(예: 0.92 => 92% )을 나타내는 0 과 1 사이의 숫자입니다.

기본값은 1.0 ( 100% )입니다.

캐시 흉상

캐시 무효화를 활성화하기 위해 현재 시간을 URL 요청에 쿼리 문자열로 추가하려면 true로 설정합니다.

기본값은 false

이미지 자리 표시자

이미지를 가져올 때 사용되는 자리 표시자 이미지의 데이터 URL이 실패합니다.

기본값은 빈 문자열이며 실패한 이미지에 대해 빈 영역을 렌더링합니다.

브라우저

최신 Chrome 및 Firefox(작성 당시 각각 49 및 45)에서 테스트되었으며 Chrome은 더 뛰어난 SVG 지원 및 CSSStyleDeclaration.cssText 속성을 지원한다는 사실로 인해 큰 DOM 트리에서 훨씬 더 나은 성능을 발휘합니다.

Internet Explorer는 SVG <foreignObject> 태그를 지원하지 않으므로 지원되지 않습니다.

Safari는 <foreignObject> 태그에 더 엄격한 보안 모델을 사용하므로 지원되지 않습니다. 제안된 해결 방법은 toSvg 사용하고 서버에서 렌더링하는 것입니다.

종속성

원천

현재는 표준 lib만 사용되지만 브라우저가 다음을 지원하는지 확인하세요.

약속하다
SVG <foreignObject> 태그

작동 원리

HTML의 일부를 이미지로 내보내는 간단하고 표준적인 방법이 언젠가는 존재할 수도 있습니다(또는 이미 존재할까요?). 그런 다음 이 스크립트는 그런 이미지를 얻기 위해 제가 뛰어넘어야 했던 모든 과정에 대한 증거 역할만 할 수 있습니다. 분명한 일이 이루어졌습니다) 그러나 지금까지 찾지 못했습니다.

이 라이브러리는 <foreignObject> 태그 내부에 임의의 HTML 콘텐츠를 포함할 수 있는 SVG 기능을 사용합니다. 따라서 해당 DOM 노드를 렌더링하기 위해 다음 단계가 수행됩니다.

원래 DOM 노드를 재귀적으로 복제합니다.
노드와 각 하위 노드의 스타일을 계산하고 해당 복제본에 복사합니다.

물론 의사 요소는 어떤 식으로든 복제되지 않으므로 다시 만드는 것을 잊지 마세요.

웹 글꼴 포함

웹 글꼴을 나타낼 수 있는 모든 @font-face 선언을 찾습니다.
파일 URL을 구문 분석하고 해당 파일을 다운로드합니다.
base64 인코딩 및 인라인 콘텐츠를 dataURL로
처리된 모든 CSS 규칙을 연결하여 하나의 <style> 요소에 넣은 다음 복제본에 연결합니다.

이미지 삽입

<img> 요소에 이미지 URL 삽입
글꼴과 유사한 방식으로 background CSS 속성에 사용되는 인라인 이미지

복제된 노드를 XML로 직렬화
XML을 <foreignObject> 태그로 래핑한 다음 SVG로 래핑한 다음 데이터 URL로 만듭니다.
선택적으로 PNG 컨텐츠 또는 원시 픽셀 데이터를 Uint8Array로 가져오려면 SVG를 소스로 사용하여 이미지 요소를 생성하고 이를 오프스크린 캔버스에 렌더링한 다음 캔버스에서 컨텐츠를 읽습니다.
완료!