效果展示
源碼分享
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>拍照上傳</title>
<link rel="stylesheet" href="index.css"/>
<script type='text/javascript' src='index.js' charset='utf-8'></script>
<script type='text/javascript' src='jquery-2.1.4.min.js' charset='utf-8'></script>
</head>
<style>
body{
margin: 0
}
.content{
padding:0.5rem;
display: flex;
align-items: center;
border-bottom: 1px #999 solid
}
.label{
width:5rem;
}
.img-area{
flex:1
}
.container{
background-color:#e7e7e7;
position: relative;
}
.container div{
text-align: center;
padding:0.5rem 0
}
.container input{
opacity:0;
filter:alpha(opacity=0);
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9;
}
.container p{
font-size: 0.9rem;
color:#999
}
.btn{
background-color: #4363ab;
color: #fff;
text-align: center;
padding: 0.5rem 1rem;
width:80%;
border-radius: 0.2rem;
margin: 2rem auto;
font-weight: 600;
font-size: 1.2rem
}
img {
border: solid 1px #ddd;
}
</style>
<body>
<div align="center">
<h3>圖片+文字合成一張海報</h3>
<img src="img/wxmp.jpg" width="300">
<!-- <img src="img/bgimg.png" width="110"> -->
<img src="img/code.png" width="146">
<div style="position: absolute;left: 800px;top: 100px;width: 300px;padding: 10px;border: 1px solid #EEEEEE;">
<strong>文字：</strong>
<div style="padding: 10px 0;"></div>
<div>Tel：18068763980</div>
</div>
</div>
<div id="imgBox" align="center" style="margin: 10px;">
<button οnclick="hecheng()" id="hc">一鍵合成</button>
</div>
</body>
<script>
$("#hc").on("click",function(){
draw(function() {
document.getElementById('imgBox').innerHTML = '<p style="padding:10px 0">合成圖片成功！可以鼠標另存圖片查看我是否是一張圖片~~！</p><img src="'+base64[0]+'" width="300">';
})
})
var data = [ 'img/wxmp.jpg',
'img/code.png'], base64 = [];
var position = [[0,450,184,100,100,100,100],[0,1028,1020,1055,1125,1185,1245]]; //position[0]爲left值，position[1]爲top值（圖片相對位置），依次爲圖片1-圖片3、文字1-文字2
var size = [[750,180,146,156],[1300,180,190]];//size[0]爲width值，size[1]爲height值（圖片相對大小），依次爲圖片1-圖片3
var text = ['白領貸','張三','XX農商行','1888888888'];//文字內容
function draw(fn) {
var c = document.createElement('canvas'), ctx = c
.getContext('2d'), len = data.length;
//背景圖寬高（第一張爲背景圖）
c.width = size[0][0];
c.height = size[1][0];
ctx.rect(0, 0, c.width, c.height);
ctx.fillStyle = '#fff';
ctx.fill();
function drawing(n) {
if (n < len) {
var img = new Image;
img.src = data[n];
if(n==0){
img.onload = function() {
ctx.drawImage(img, position[0][n], position[1][n], size[0][n], size[1][n]);//(img_name,left,top,width,height)
ctx.font="60px microsoft yahei";//設置畫筆的字體大小和格式
ctx.fillStyle = "rgba(0,0,0,1)";//設置字體的顏色
// ctx.fillText(text[0],position[0][len], position[1][len]);//將文字信息畫在畫布上，按照x,y的座標，在手機上座標不是很準確
ctx.fillText(text[0],position[0][len+1], position[1][len+1]);
ctx.fillStyle = "#003399"
ctx.font="45px microsoft yahei";//設置畫筆的字體大小和格式"
ctx.fillText(text[1],position[0][len+2], position[1][len+2]);
ctx.fillStyle = "#FF0000"
ctx.font="40px microsoft yahei";//設置畫筆的字體大小和格式"
ctx.fillText(text[2],position[0][len+3], position[1][len+3]);
ctx.fillStyle = "#FF00FF"
ctx.font="40px microsoft yahei";//設置畫筆的字體大小和格式"
ctx.fillText(text[3],position[0][len+4], position[1][len+4]);
drawing(n + 1);//遞歸
}
}else if(n==1){
img.onload = function() {
ctx.drawImage(img, position[0][n], position[1][n], size[0][n], size[1][n]);
drawing(n + 1);//遞歸
}
}else{
img.onload = function() {
ctx.drawImage(img, position[0][n], position[1][n], size[0][n], size[1][n]);
drawing(n + 1);//遞歸
}
}
} else {
//保存生成作品圖片
base64.push(c.toDataURL("image/jpeg", 0.8));
//alert(JSON.stringify(base64));
fn();
}
}
drawing(0);
}
</script>
</html>