html2canvas.js를 이용한 화면 캡쳐

html2canvas.js 

- https://html2canvas.hertzen.com/

html2canvas - Screenshots with JavaScript

 

예전에 저 html2canvas를 이용해 width 값을 입력하면 입력된 값에 맞게 화면 컨텐츠를 캡쳐하는 작업을 한적이 있다.

그에 해당하는 소스이다. 라이브러리를 이용한 거지만 꽤 어렵게 구현했다. 

다시 사용될 일이 있을까 하고 생각하니까 급 슬퍼진다. ㅠㅠ

ImageCapture.js

var ImageCapture=( function($){

    function HTMLCapture() {
        this.imgSetInfos = [];
        this.imgSetCount = 0;
    }

    HTMLCapture.prototype.add = function ( options ) {
        this.imgSetInfos.push({ 
        target:$(options.target), 
        container:$(options.container), 
        width:options.width });
        
        ++this.imgSetCount;
    };
    HTMLCapture.prototype.multiCapture = function () {
        var that = this;
        if (that.imgSetInfos.length < 1) {return;}
        for (var i = 0, len = that.imgSetInfos.length; i < len; i++) {
            var data = that.imgSetInfos[i];
            canvasImgToResize.call(that, data.target, data.container, data.width);
        }
    };
    HTMLCapture.prototype.capture = function (options) {
        this.captureTarget = $(options.target);
        this.captureImgContainer = $(options.container);
        this.imgW = options.width;

        //canvasImgToResize.call(this,  $("#like_pp_area"), imgSetInfos[0].container,   imgSetInfos[0].width );
        canvasImgToResize.call(this, this.captureTarget, this.captureImgContainer, this.imgW);
    };


    function canvasImgToResize($captureTarget, resizeTarget, resizeWidth) {
        var that = this;

        html2canvas($captureTarget, {
            useCORS: true,
            onrendered: function (canvas) {
                //var imgData = canvas.toDataURL("image/jpeg");
                //
                var tw = resizeWidth;
                var targetContainer = resizeTarget;

                var dummyCanvas = document.createElement("canvas");
                var context = dummyCanvas.getContext("2d");
                var widthToPercent = 100 / ( canvas.width / tw);
                var percentToHeight = widthToPercent * canvas.height / 100;

                dummyCanvas.width = tw;
                dummyCanvas.height = percentToHeight;
                context.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, tw, percentToHeight);
                //
                var dataURL = dummyCanvas.toDataURL("image/png");
                var img = new Image();
                img.src = dataURL;

                targetContainer.append(img);


                var blob = dataURItoBlob(dataURL);
                var objectURL = URL.createObjectURL(blob);

                var testImgViewContainer = document.createElement("div");
                testImgViewContainer.setAttribute("class", "shortcut-view");
                /*

                 var tImg=new Image();
                 testImgViewContainer.appendChild( tImg );
                 tImg.crossOrigin = "anonymous";
                 tImg.src=objectURL;
                 tImg.width=tw;
                 tImg.height=percentToHeight;
                 */

                var loc = document.createElement("a");
                testImgViewContainer.appendChild(loc);
                loc.href = objectURL;
                var copyURL = objectURL;
                var sliceNames = copyURL.split("/")
                var fileName = sliceNames[sliceNames.length - 1];
                loc.download = fileName + ".png";
                loc.click();

                URL.revokeObjectURL(objectURL); //메모리 해제하기


            }
        });//end html2canvas
    }; //end  canvasImgToResize


    function dataURItoBlob(dataURI) {
        //console.log( dataURI.replace(/^data:image\/(png|jpeg);base64,/, ""))
        var byteStr = atob(dataURI.split(',')[1]);
        var mimeStr = dataURI.split(',')[0].split(':')[1].split(';')[0];

        var arrBuf = new ArrayBuffer(byteStr.length);
        var uInt8Arr = new Uint8Array(arrBuf);
        for (var i = 0; i < byteStr.length; i++) {
            uInt8Arr[i] = byteStr.charCodeAt(i);
        }
        return new Blob([uInt8Arr], {type: mimeStr});
    }

    return HTMLCapture;
}(jQuery) );

html

<div class="test_container">
  <div class="capture_area">
    <h1>html2canvas</h1>
    <div class="list_container">
      <ul class="list">
        <li><img src="images/t1.jpg" /></li>
        <li><img src="images/t1.jpg" /></li>
        <li><img src="images/t1.jpg" /></li>
      </ul>
    </div>
    <p>
    HTML5기반으로 한 html2canvas 라이브러리는 직접 사용자 브라우저에서 웹 페이지 또는 일부의 스크린 샷을 촬영할 수 있다.
    DOM페이지에서 제공하는 정보에 기초하여 화면을 작성한다. 이미지타입은 기본 png로 구성한다.
    canvas를 이용하기에 기본적으로 크롬/파이어폭스에서 되고 IE경우 10버전 이상부터 가능하다.
    HTML5기반으로 한 html2canvas 라이브러리는 직접 사용자 브라우저에서 웹 페이지 또는 일부의 스크린 샷을 촬영할 수 있다.
    DOM페이지에서 제공하는 정보에 기초하여 화면을 작성한다. 이미지타입은 기본 png로 구성한다.
    canvas를 이용하기에 기본적으로 크롬/파이어폭스에서 되고 IE경우 10버전 이상부터 가능하다.
    HTML5기반으로 한 html2canvas 라이브러리는 직접 사용자 브라우저에서 웹 페이지 또는 일부의 스크린 샷을 촬영할 수 있다.
    DOM페이지에서 제공하는 정보에 기초하여 화면을 작성한다. 이미지타입은 기본 png로 구성한다.
    canvas를 이용하기에 기본적으로 크롬/파이어폭스에서 되고 IE경우 10버전 이상부터 가능하다.
    HTML5기반으로 한 html2canvas 라이브러리는 직접 사용자 브라우저에서 웹 페이지 또는 일부의 스크린 샷을 촬영할 수 있다.
    DOM페이지에서 제공하는 정보에 기초하여 화면을 작성한다. 이미지타입은 기본 png로 구성한다.
    canvas를 이용하기에 기본적으로 크롬/파이어폭스에서 되고 IE경우 10버전 이상부터 가능하다.
    HTML5기반으로 한 html2canvas 라이브러리는 직접 사용자 브라우저에서 웹 페이지 또는 일부의 스크린 샷을 촬영할 수 있다.
    </p>
    <button class="btn-primary" style="margin-top:40px;">capture</button>
  </div>
</div>
<div id="shortcutView"></div>
<div style="width:940px;margin:0 auto">
  <ul class="img_list">
    <li><div id="capture-view1"></div></li>
    <li><div id="capture-view2"></div></li>
    <li><div id="capture-view3"></div></li>
  </ul>
</div>

위 html내에 삽입될 script

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/ImageCapture.js"></script>
<script>
    // 여러 장 캡쳐할 경우 호출~  add  메소드로 정보 입력후 > multiCapture() 메소드 호출
    $(window).load(function(){
        var imgCapture=new ImageCapture();
        //캡쳐할 정보 입력 target: 캡쳐 대상 , container: 캡쳐한 이미지 컨테이너 , width:캡쳐이미지 사이즈
        imgCapture.add({target:".capture_area", container: "#capture-view1", width: 800});
        imgCapture.add({target:".test_container", container: "#capture-view2", width: 400});
        imgCapture.add({target:".test_container", container: "#capture-view3", width: 200});

        $(".btn-primary").on("click", function(){
            imgCapture.multiCapture();
            // 1장 이미지 캡쳐 - target: 캡쳐 대상 , container: 캡쳐한 이미지 컨테이너 , width:캡쳐이미지 사이즈
            // imgCapture.capture({target:"#lay-likep2", container: "#capture-view3", width: 200});
        });
    })
</script>