h5 canvas(toDataURL)实现将图片与文字结合

toDataURL实现将图片与文字结合

基于自己想吹牛皮，所以就临时写了个H5页面。

一、用到的功能点：

1.canvas.toDataURL(type, encoderOptions);

举例说明：<canvas id="canvas" width="10" height="10"></canvas>获取canvas画布var canvas = document.getElementById("canvas");var dataURL = canvas.toDataURL();

2.context.fillText(text,x,y,maxWidth);

参数值

参数描述text规定在画布上输出的文本。x开始绘制文本的 x 坐标位置（相对于画布）。y开始绘制文本的 y 坐标位置（相对于画布）。maxWidth可选。允许的最大文本宽度，以像素计。

fillText()；其默认颜色是黑色。

提示：请使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。

 

二、接下来进入代码

HTML

<div class="content"> 
<div class="inputText">
<div class="mesg">
<p class="title">无人驾驶证</p>
<div class="inputs">姓名：<input id="name" type="text" placeholder="姓名"></div>
<div class="inputs">国籍：<input id="guoji" type="text" placeholder="国籍"></div>
<div class="inputs">驾驶类型：<input id="type" type="text" placeholder="驾驶类型"></div>
<div class="inputs">合格证编号：<input id="number" type="text" placeholder="合格证编号"></div>
<div class="inputs">签发日期：<input id="date" type="text" placeholder="签发日期"></div>
<div class="inputs">有效期限：<input id="youxiao" type="text" placeholder="有效期限"></div>
</div>
<a id="submit" href="#showImg">提交</a>
</div>
<img id="imgs" src="img/card.jpg" class="hide" width="370" height="278">
<div id="showImg" class="hide">
<canvas width="370" height="278" id="canvas"></canvas>
</div>
</div>

CSS

*{margin:0;padding:0}
body{background-color:#e6e6fa;font-family:"microsoft yahei"}
body,html{color:#333;font-size:14px}
.content{width:370px;height:278px;position:relative}
.inputText{width:370px;height:278px;position:absolute;padding-left:20px}
.title{font-size:20px;text-align:center;color:#00f;padding:20px 0}
input{padding:5px;text-decoration:none;margin:10px 0}
.inputs{display:block;margin-top:10px}
#submit{text-align:center;color:#fff;background-color:#428bca;width:200px;height:30px;border-radius:10px;line-height:30px;display:block;margin-top:30px}
.hide{display:none}
#imgs{position:absolute;top:0;width:370px;height:278px}
#canvas{z-index:2;position:absolute}

javascript

$(function(){
$("#submit").click(function(){
var name = $("#name").val();
var guoji = $("#guoji").val();
var types = $("#type").val();
var number = $("#number").val();
var date = $("#date").val();
var youxiao = $("#youxiao").val();
if(name == "" || guoji == "" || types == "" || number =="" || date == "" || youxiao == ""){
alert("请输入信息");
}else{
drawImage(name,guoji,types,number,date,youxiao);
}
});
});
//num1..num6为6个input框val值
function drawImage(num1,num2,num3,num4,num5,num6){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "microsoft yahei";
var img = document.getElementById("imgs");
ctx.drawImage(img,0,0,370,278);
ctx.fillText(num1, 105,140);
ctx.fillText(num2, 180,140);
ctx.fillText(num3, 128,164);
ctx.fillText(num4, 128,190);
ctx.fillText(num5, 128,215);
ctx.fillText(num6, 213,215); 
var downloadImg = canvas.toDataURL("image/png"); 
var w = window.open("about:blank","image from canvas");
w.document.write('<img src='+ downloadImg +' alt="from canvas">');
$(".inputText").remove();
$("img,#showImg").removeClass("hide");
}

查看DEMO案例