一个很简单的小列子,直接贴代码,代码中都有注释,下面有demo链接。
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<script src="js/jquery.js"></script>
</head>
<body>
<!--需要合成图片,因为没法直接读取本地图片,所以将图片放在这里并隐藏-->
<div style="display:none">
<img id="starImg" style="height:100%; width:100%;" src="img/invitation.png" />
</div>
<!--画布-->
<canvas id="main" height="730" width="420" style="border:1px solid #d3d3d3;"></canvas>
<!--输入框,失去焦点后自动执行hechen()-->
<input type="text" id="desc" onblur="hechen()" value="" />
<!--saveImageInfo()生成照片并显示到另个网页-->
<button onclick="saveImageInfo()">确认生成</button>
<script>
//预加载将图片绘制到画布
$(function(){
hechen();
});
function hechen(){
//获取时间2012-12-12
var mydate = new Date();
var date = mydate.getFullYear()+'-'+(mydate.getMonth()+1)+'-'+mydate.getDate();
//获取画布对象
var mainCtx = getCanvasContext('main');
var maxWidth = mainCtx.width;
var maxHeight = mainCtx.height;
mainCtx.clearRect(0,0,1000,1000);
//获取图片的实际路径
var starImg = new Image();
starImg.src=$('#starImg').attr('src');
//合成
starImg.onload=function(){
//先把图片绘制在这里
mainCtx.drawImage(starImg,0,0,420,730);
//读取用户的文本
if($('#desc').val()){
//设置用户文本的大小字体等属性
mainCtx.font = "small-caps bold 18px STXinwei";
//设置用户文本填充颜色
mainCtx.fillStyle = "black";
//绘制文字
mainCtx.fillText($('#desc').val(),108,335);
//设置时间文本的大小字体属性
mainCtx.font = "small-caps bold 16px STXinwei";
//绘制时间
mainCtx.fillText(date,326,447);
}
};
}
//通过id获取canvas对象
function getCanvasContext(id){
return document.getElementById(id).getContext("2d");
}
//将画布生成图片
function saveImageInfo() {
var mycanvas = document.getElementById("main");
var image = mycanvas.toDataURL("image/jpg");
var w=window.open('about:blank','image from canvas');
w.document.write("<img src='"+image+"' alt='from canvas'/>");
}
//下载图片
function saveAsLocalImage(){
var myCanvas = document.getElementById("main");
var image = myCanvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream");
window.location.href=image;
}
</script>
</body>
</html>
demo源码链接
上面那个积分现在变得太高了
百度云链接链接:https://pan.baidu.com/s/1monENQf9QSqWkNhbPQ7YxA 密码:7gro