經過 JS 將 BSAE64 生成圖片並下載

HTML：

<div style="display:block;margin:0 auto;width:638px;height:795px;">
    <div id="render" >CONTENT</div>
</div>

<div id="template" style="margin:10px 0 0 385px;">
    <input type="button" onclick="qc0926()" value="下載圖片" />
</div>

JS：

<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
    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); //下載域名證書
    };
</script>

html2canvas.js - 代碼：

/*
  html2canvas 0.5.0-alpha2 <http://html2canvas.hertzen.com>
  Copyright (c) 2015 Niklas von Hertzen

  Released under MIT License
*/
// 篇幅太長，沒法保存請查看原文

附錄：

Base64：Base64 是網絡上最多見的用於傳輸 8Bit 字節碼的編碼方式之一，Base64 就是一種基於 64 個可打印字符來表示二進制數據的方法。Base64 編碼是從二進制到字符的過程，可用於在 HTTP 環境下傳遞較長的標識信息。採用 Base64 編碼具備不可讀性，須要解碼後才能閱讀。

Canvas：Canvas API（畫布）是在 HTML5 中新增的標籤用於在網頁實時生成圖像，而且能夠操做圖像內容，基本上它是一個能夠用 JavaScript 操做的位圖（bitmap）。Canvas 對象表示一個 HTML 畫布元素 - <canvas>。它沒有本身的行爲，可是定義了一個 API 支持腳本化客戶端繪圖操做。

閱讀原文：https://blog.mazey.net/1926.html