MVC知識—HTML生成圖檔

開發工具與關鍵技術： VS ， ；HTML生成圖檔

作者：劉佳明

撰寫時間：2019年 5 月 20 日

（本文章代碼及插件均來源于老師的課件！！！！）

衆所周知，html 是描述網頁的一種腳本語言，通過使用各種的标記标簽來進行編輯，

浏覽器通過識别這些标記标簽來生成我們所需要的頁面，

但如何經過HTML直接的來實作，将HTML的樣式變化為圖檔呢？

第一步，準備好我們需要實作目的必備方法，當然，這個方法是屬于已經封裝完畢的一個檔案夾，具體名稱截圖如下：

第二部，将對應需要的頁面代碼編輯好，

（在這裡前端的知識的知識檔案不做太多的講述了，按照個人的喜好編輯更加好看的HTML效果。。）

第三部分：在script标簽中對HTML生成圖檔做具體的編輯；（代碼+備注如下）

//生成圖檔；

function CreateImage() {
            var width = $(".txtBox").width();//(擷取所需生成HTML中div的寬度)
            $("#modelImage .modal-dialog").width(width);//建構一個模态框用來單獨放置所生成的圖檔,并且将我們所擷取到的div寬度賦給模态框中的子級div
            var str = $("#StudentName").text().trim();//課件需要可以不用考慮；
            if (str!="") {
                html2canvas($("#certificateBox"), { //需要生成圖檔的id  html2canvas($("#certificateBox"),
                    onrendered: function (canvas) {//一個canvas标簽，裝載對應圖檔的标簽；
                       // console.log(canvas);
                        //生成base64圖檔資料
                        var dataUrl = canvas.toDataURL();//toDataURL方法 生成64位url的連結；
                        $("#modCertificateImg").attr("src", dataUrl);
                    }
                });
                $("#modelImage").modal("show");
            }
            
            else {
                layer.alert("請選擇合格學生的資訊！");
            }
        }
點選按鈕，調用方法即可；
<button class="btn btn-outline-secondary" onclick="CreateImage()">生成圖檔</button>

           

以下是生成圖檔的效果截圖