MVC知识—HTML生成图片

古城微笑少年丶 2022-01-26 00:09 486阅读 0赞

开发工具与关键技术： VS ， ；HTML生成图片  
作者：刘佳明  
撰写时间：2019年 5 月 20 日  
（本文章代码及插件均来源于老师的课件！！！！）

众所周知，html 是描述网页的一种脚本语言，通过使用各种的标记标签来进行编辑，  
浏览器通过识别这些标记标签来生成我们所需要的页面，  
但如何经过HTML直接的来实现，将HTML的样式变化为图片呢？  
第一步，准备好我们需要实现目的必备方法，当然，这个方法是属于已经封装完毕的一个文件夹，具体名称截图如下：  
![在这里插入图片描述][20190527165058308.png]

第二部，将对应需要的页面代码编辑好，  
（在这里前端的知识的知识文件不做太多的讲述了，按照个人的喜好编辑更加好看的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>

以下是生成图片的效果截图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]

[20190527165058308.png]: /images/20220126/24356e18577e44378d58313bb101270b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]: /images/20220126/1571c8d9b1894e68af752d109aac62a1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，486人围观）

还没有评论，来说两句吧...

相关阅读

相关 html2canvas、canvas2image将HTML网页生成图片

[html2canvas][] [canvas2image][] [参考这个文章][Link 1] [canvas教程][canvas] [html2canvas]

Love The Way You Lie/ 2023年01月18日 12:22/ 0 赞/ 9 阅读

相关 html2canvas生成图片显示不全

原因 html2canvas只能给屏幕可视范围之内的元素生成图片办法 1. 滚动节点，使要生成图片的元素进入可视区（笨办法，不推荐） 2. 克隆节点并添加到

╰半橙微兮°/ 2022年12月22日 09:44/ 0 赞/ 332 阅读

相关 html生成高清图片大小,html2canvas 生成高清图片

html2canvas.js 要改2处代码第1处代码 line 603window.html2canvas = function(nodeList, options) \{

超、凢脫俗/ 2022年10月06日 07:50/ 0 赞/ 253 阅读

相关 html2canvas将html内容生成canvas图片实现方式

所实现功能：图片、文字合成一张图，并在H5中下载所生成图片。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

约定不等于承诺〃/ 2022年08月31日 15:24/ 0 赞/ 530 阅读

相关 html页面生成图片并下载

<body> <div id="shareBody"> <div id="code"></div> <p>一些文

梦里梦外;/ 2022年05月12日 01:26/ 0 赞/ 281 阅读

相关用java代码根据html页面生成图片

为什么做这个？目前微信公众号开发很火，开发模式跟用户互动时可以是文字、图文、图片、语音、视频等。而公众号界面展示基本都是html5页面。

心已赠人/ 2022年04月05日 08:14/ 0 赞/ 1007 阅读

相关 MVC知识—HTML生成图片

开发工具与关键技术： VS ，；HTML生成图片作者：刘佳明撰写时间：2019年 5 月 20 日（本文章代码及插件均来源于老师的课件！！！！）众所周知

古城微笑少年丶/ 2022年01月26日 00:09/ 0 赞/ 487 阅读

相关 html5将文字生成图片

本文链接：https://blog.csdn.net/qq\_30100043/article/details/76549377 由于canvas能够将画布上的纹理生成数据

短命女/ 2021年10月19日 04:31/ 0 赞/ 543 阅读

相关页面生成图片-html2canvas

页面生成图片-html2canvas 引入js 示例编写html，指定根标签id：table 生成图片base64

客官°小女子只卖身不卖艺/ 2021年10月06日 03:08/ 0 赞/ 455 阅读

相关用dom-to-image将html生成图片

由于业务需要，要将`html`的表格转成图片下载下来，一开始使用的是`html2canvas.js`。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完

落日映苍穹つ/ 2021年09月02日 03:05/ 0 赞/ 389 阅读