废话不多说 直接看效果图
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>个人诚信证书</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
padding: 0;
margin: 0;
width:100%;
display:flex;
align-items:center;
justify-content: center;
height: 100vh;
}
img{
width:100%;
height: 100%;
}
@font-face {
font-family: 'fzdbs';
src: url('/static/img/certificate/fzdbs.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'fz';
src: url('/static/img/certificate/fz.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
<script src="/static/js/jquery-1.8.3.min.js"></script>
</head>
<body >
<h1>正在为您载入证书...</h1>
<div class="main"></div>
<script>
let height = $(window).height(),
width = $(window).width(),
images=[
{
"type":"img",
"url":"/static/img/certificate/bg.jpg",
"location":{
x:0,
y:0,
w:600,
h:755
}
},
{
"type":"img",
"url":"/attachment/users/share/qrcode/2018/10/17/1539738665.png",
"location":{
x:252,
y:337,
w:91,
h:91
}
},
{
"type":"img",
"url":"/static/img/certificate/qy.png",
"location":{
x:221,
y:152,
w:171,
h:37
}
},
{
"type":"text",
"text":"授予：{$db['realname']}",
"font":"26px fzdbs",
"color":"#282828",
"location":{
x:163,
y:231,
}
},
{
"type":"text",
"text":"诚信守护者",
"font":"50px fz",
"color":"#b62f33",
"location":{
x:178,
y:300,
}
},
{
"type":"text",
"text":"人人参与 诚信建设",
"font":"22px fzdbs",
"color":"#282828",
"location":{
x:213,
y:460,
}
}
,
{
"type":"text",
"text":"共同守护 信用社会",
"font":"22px fzdbs",
"color":"#282828",
"location":{
x:213,
y:500,
}
}
,
{
"type":"text",
"text":"福建期望管家信用管理有限公司",
"font":"24px fzdbs",
"color":"#282828",
"location":{
x:148,
y:575,
}
}
,
{
"type":"text",
"text":"{$db['year']}",
"font":"24px fzdbs",
"color":"#282828",
"location":{
x:295,
y:615,
}
},
{
"type":"img",
"url":"/static/img/certificate/gs.png",
"location":{
x:340,
y:520,
w:121,
h:117
}
},
];
var c=document.createElement('canvas'),
len = images.length;
ctx=c.getContext('2d');
c.width=600;
c.height=775;
ctx.rect(0,0,c.width,c.height);
ctx.fillStyle= 'transparent';
ctx.fill();
function drawing(n){
if (n<len) {
let db = images[n];
if (db.type == "img"){
var img = new Image;
img.src = db.url;
img.onload = function(){
ctx.drawImage(img,db.location.x,db.location.y,db.location.w,db.location.h);
drawing(n+1);
}
}else if (db.type == "text"){
ctx.font = db.font;
ctx.fillStyle = db.color;
ctx.fillText(db.text,db.location.x,db.location.y);
drawing(n+1);
}
}else{
convertCanvasToImage(c);
}
}
drawing(0);
function convertCanvasToImage(canvas) {
var hc_image = new Image();
hc_image.src = canvas.toDataURL("image/png");
$("h1").hide();
$('.main').html(hc_image);
}
</script>
</body>
</html>
