[PROGRAMMING] 프로그래밍 (Programming) - DOM-TO-IMAGE

코드 

· HTML, 자바스크립트(Javascript), CSS

· dom-to-image (JS CDN)

· https://openbase.com/js/dom-to-image

 

기능 

· HTML5 캔버스를 사용하여 DOM 노드를 이미지로 변환 및 생성 

 

결과물

 

1. HTML 

· figure#main : (dom-to-image) 'domtoimage' 오브젝트에 적용할 리소스와 결과(이미지)를 표시할 영역

· figure#main > figcaption[name="resource"] > #resource-original : (dom-to-image) 'domtoimage' 오브젝트에 사용될 DOM 노드 (이미지 표시용)

· figure#main > img[name="result"] : (dom-to-image) 'domtoimage' 오브젝트에서 처리 결과를 적용할 이미지 

<main id="main-body">

    <section class="container flex-align-center flex-column" id="example">

        <article class="content" name="example">
            
            <!-- 메인 컨텐츠 -->
            <figure class="ct-img" id="main">

                <!-- 메인 이미지 img-main -->
                <img class="img-main" name="result" />

                <!-- 리소스 텍스트 original resource text -->
                <figcaption name="resource">
                    <input type="text" id="resource-original" value="" placeholder="plaese, enter the text ..." >
                </figcaption>

            </figure>

        </article>

    </section>

</main>

 

2. CSS

· figure#main > img[name="result"] : 'src' 속성 값이 없을 경우(not) 노드를 그리지 않음 

#main-body .container#example > .content[name="example"] 
{
  width: 100%;
  height: 100vh;
  padding: 0 1vw;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-box: center;
  -webkit-align-items: center;
  align-items: center;
  -moz-box-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center; 
}
#main-body .container#example > .content[name="example"] figure#main 
{
  width: 300px;
  max-width: 300px;
  clear: both;
}
#main-body .container#example > .content[name="example"] figure#main > img[name="result"]:not([src]) { display: none; }
#main-body .container#example > .content[name="example"] figure#main > img[name="result"][src] { width: 100%; display: block; }
#main-body .container#example > .content[name="example"] figure#main > img[name="result"][src] ~ figcaption[name="resource"] { margin-top: 10px; }
#main-body .container#example > .content[name="example"] figure#main > figcaption[name="resource"] 
{
  background-color: #ccc;
  width: 100%;
  height: 35px;
  max-height: 35px; 
}
#main-body .container#example > .content[name="example"] figure#main > figcaption[name="resource"] > input[type="text"] 
{
  width: 100%;
  height: inherit;
  border: none;
  border-bottom: 1px solid #212121; 
}

 

figure#main

figure#main > figcaption[name="resource"]

figure#main > figcaption[name="resource"] > #resource-original

· figure#main > img[name="result"]

 

3. 자바스크립트 (Javascript)

· figure#main > figcaption[name="resource"] > #resource-original : 'input' 키 눌림(keypress) 이벤트 바인드

· 엔터 키 (keyCode : 13) 눌린 경우, 타겟 DOM 노드 (figure#main > figcaption[name="resource"]) 를 매개변수로, 이미지 변환 함수 실행 

// 리소트 텍스트 키 눌림(keypress)
function ex_input_keypress( e )
{
    var keycode = e.which || e.keyCode || 0;
    if ( keycode == 0 ) return;

    if ( keycode == 13 )
    {
        // 키 눌림(keypress) : 엔터(Enter)
        if ( typeof domtoimage == "undefined" ) return;

        // 리소스 텍스트 (figcaption[name="resource"])
        var target = this.parentNode;
        ex_dom_to_img_topng( target );
        ex_dom_to_img_tojpg( target );
    }
}

 

· ex_dom_to_img_topng( target ) : domtoimage.toPng() 함수를 실행 ( DOM 노드 → PNG )

· 'domtoimage.toPng' 함수 : 타겟(target) 노드를 base64 인코더 데이터 URL 포맷으로 변환 및 반환 

· figure#main > img[name="result"] : base64 인코더 데이터 URL 표시 

// dom-to-image : png 파일 만들기 
function ex_dom_to_img_topng (target)
{
    domtoimage.toPng( target ) 
    .then( function(dataUrl) {
        // base64 encode data (url format)
        console.log( dataUrl ); 

        // figure#main > img.img-main
        var node = target.parentNode.querySelector( 'img[name="result"]' );
        node.src = dataUrl;

    } ) 
    .catch( function(error) {
        console.error(error);
    } );
}

 

· ex_dom_to_img_tojpg( target ) : domtoimage.toJpeg() 함수를 실행 ( DOM 노드 → JPEG )

· 'domtoimage.toJpeg' 함수 : 타겟(target) 노드를 이미지(jpg) URL 포맷으로 변환 및 반환 

· 압축률 적용 : { quality : 0.9 }

· <a> 노드 생성 및 초기화, 이미지 다운로드 실행 

// dom-to-image : jpge 파일 만들기
function ex_dom_to_img_tojpg ( target )
{
    domtoimage.toJpeg( target, { quality : 0.9 } )
    .then( function(dataUrl) {       
        var link = document.createElement( "a" );
        link.download = "example-01.jpg";
        link.href = dataUrl;

        link.click();
    } );
}

텍스트 입력 후 엔터 키(13) 누름

이미지 표시 및 이미지 다운로드