JS를 통한 BSAE64 이미지 생성 및 다운로드

HTML:

    
CONTENT



    

JS:

    var canvas,render,html,imgsrcgo;
    function renderHTMLAndSave() {
        var render= document.getElementById('render');
        html2canvas(render).then(function (canvas) {
            var imgsrc= canvas.toDataURL();imgsrcgo=imgsrc;
        });
    }
    window.onload=renderHTMLAndSave();
    var imgsrc;
    var imgData;
    var type='png';
    var _fixType = function(type) {
        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    };
    function saveFile(data, filename){
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };
    function qc0926(){
        imgData=imgsrcgo;
        imgData = imgData.replace(_fixType(type),'image/octet-stream'); //  image data， mime type
        var filename = 'zgsjdomaincertification' + '_name' + '.' + type; //  
        window.load=saveFile(imgData,filename); // 
    };

html2canvas.js - 코드:

/*
  html2canvas 0.5.0-alpha2 
  Copyright (c) 2015 Niklas von Hertzen

  Released under MIT License
*/
//  ， 

부록:
Base64: Base64는 네트워크에서 가장 흔히 볼 수 있는 8Bit 바이트 코드를 전송하는 인코딩 방식 중 하나입니다. Base64는 64개의 인쇄 가능한 문자를 바탕으로 바이너리 데이터를 표시하는 방법입니다.Base64 인코딩은 HTTP 환경에서 비교적 긴 식별 정보를 전달할 수 있는 바이너리에서 문자까지의 과정입니다.Base64 인코딩을 사용하면 읽을 수 없으므로 디코딩을 해야 읽을 수 있습니다.
Canvas:Canvas API(캔버스)는 HTML5에 추가된 탭으로 웹 페이지에서 실시간으로 이미지를 생성하고 이미지 내용을 조작할 수 있으며 기본적으로 자바스크립트로 조작할 수 있는 비트맵(bitmap)이다.Canvas 객체는 HTML 캔버스 요소 -를 나타냅니다 .자체 동작은 없지만 스크립트화된 클라이언트 드로잉 작업을 지원하는 API를 정의합니다.
원문 읽기:https://blog.mazey.net/1926.html