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>

           

以下是生成图片的效果截图