将HTML代码转换为图片

数据库已经存在的数据

（表格）PW_Achievement
（字段）UserID, EligibleTypeID, AchievementID, ExamNumber, Achievement, StTime,
EnTime
（表格）PW_Student
（字段） studentID， UserID， ClassID， GradeID， SpecialtyID，AcademeID，StudentName，
StudentSex，StudentIDNum，StudentNumber
（表格）CertificateITable
（字段）CertificateID ，AchievementID ，CertificateNumber ，IssuanceUnit ，IssuanceTime

（表格）SYS_EligibleType （字段）EligibleType， EligibleTypeID， ScoreRange
（表格）SYS_Academe （字段） AcademeID，AcademeName
（表格）SYS_Grade （字段）GradeID，GradeName，AcademeID
（表格）SYS_Class （字段）ClassID ，GradeID，AcademeID，SpecialtyID，ClassName

这次重点讲述HTML代码转换成图片、数据的查询代码之前已经讲述过多次，所以这次的查询代码就不详细的写出来了，请自行书写，可参照前期讲述的数据查询代码。

html2canvas 源代码数据

未使用html2canvas插件的原始源代码

重庆邮电大学学生安全知识网络测试 合格证书

姓 名：

于___年__月__日 参加湖南省教育厅书法比赛,成绩优异，荣获省一等奖。

特发此证，以资鼓励

证书编号： 湖南省教育厅

使用html2canvas插件的源代码  源代码仅仅是对页面的布局可样式设计，具体效果还需要html2canvas插件生成图片效果。 最终效果请看后文。。。

将源代码使用html2canvas插件的将HTML代码转换为图片的功能生成base64图片数据。
function CreateImage() { //生成图片
var Pwidth = $(".txtBox").width();
$("#modelImage.modal-dialog").width(Pwidth);
var StudentName = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲StudentName").t…("#certificateBox"), {
onrendered: function (canvas) {
var dateURL = canvas.toDataURL();
$("#modCertificateImg").attr(“src”, dateURL);
}
});
$("#modelImage").modal(“show”);
}
else {
layer.alert(“请选择合格的学生类型”);
}
}

html2canvas插件的将HTML代码转换为图片的功能生成base64图片数据关键：

1、 使图片的宽度和带有txtBox类的div盒子的宽度保持一致。
2、 图片模态框的对话框宽度等于图片的宽度
3、 使用到的字段保持一致，去掉文本空格（实例中的studentName字段就是）
4、 字段数据不为空时，对应使用前和使用后的数据接口，这样数据就能保持一致。（实例中的$("#modCertificateImg").attr(“src”, dateURL);代码就是数据接口对应）

使用html2canvas插件将HTML代码生成为图片后可对图片进行一系列的操作，复制图片、复制图片地址、图片另存为、打印

图片打印代码

function printImage() {
var StudentName = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲StudentName").t…("#certificateBox"), {
onrendered: function (canvas) {
var dateURL = canvas.toDataURL();
var printWindow = window.open();
printWindow.document.write(’’);
printWindow.print();
}
});
}
else {
layer.alert(“请选择合格学生的信息”);
}
}

图片打印代码的解读：
1、 申明学生姓名的字段，使其对应未使用html2canvas插件前的原始代码中的学生姓名字段，在取消空格。
2、 当学生字段数据不为空时，对应使用html2canvas插件前后的数据接口，打开打印窗体，将图片信息写入到打印窗体中，弹出打印窗体。
3、 当学生字段数据为空时，提示请选择合格学生的信息

使用html2canvas插件生成图片的最终效果