结婚证神器 主要是通过 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();

    };

}

20191210_1.jpg
20191210_2.jpg

https://www.goodsunlc.com/status/create_bc/html/index.html

标签: none

添加新评论