结婚证神器前端实现代码
结婚证神器 主要是通过 HTML5 的canvas ，将元素画到 canvas 然后 通过toDataURL 生成图片，保存
HTML 代码
<div class="content" style="background-position:center;">
<div>
<canvas width=580 height=928 id="thecanvas"></canvas>
</div>
<div class="top_img"></div>
<input class="name" placeholder="请输入名字"></input>
<input class="bc_date" type='date' placeholder="请输入结婚日期" value="2018-05-20"></input>
<a class="commit" href="javascript:;">生成结婚证</a>
<span class="txt">爱对了，每天都是情人节</span>
<a class="divorce" href="javascript:;">【高级晒】</a>
<div class="image"><img>
<p>↑长按图片保存到手机</p>
<div class="notice">【我发了这个，居然还有人给我发红包了!】</div><a href="javascript:;" class="btn_close">×</a></div>
<div class="loading"></div>
</div>javascript 画图
function draw() {
var canvas = document.getElementById("thecanvas");
var ctx = canvas.getContext("2d");
var day = $('.bc_date').val();
var myDate = new Date();
if(day!=''){
myDate = new Date(day);
}
day = myDate.getFullYear() + "年" + (myDate.getMonth() + 1) + "月" + myDate.getDate() + "日";
var number = "J430404-201";
var photo = new Image();
photo.src = "../assets/image/back.jpg";
var name = $('.name').val();
photo.onload = function() {
ctx.drawImage(photo, 0, 0);
// ctx.save();
// ctx.rotate(-Math.PI/100);
ctx.fillStyle = "rgba( 27, 27, 27, 0.5)";
ctx.font = "23px simsun";
ctx.fillText(name, 213, 213);
ctx.fillText(day, 216, 307);
// ctx.font = "24px simsun";
// ctx.fillText(number,236,401);
fit(ctx);
saveImageInfo();
// ctx.restore();
};
}
