這是我之前做的一個關於文字圖片合成的代碼，供大家參考，不足支出還望體諒；具體的注釋在代碼里都有，有什么不懂了可以留言互相交流。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<title>元宵節祝福神器</title>
<style>
html,body,h2,p,ul,li,input,img,div,button,section,header,footer,canvas{margin:0;padding: 0; }
body{font:0.14rem "楷體","Microsoft YaHei","黑體","宋體","Arial",sans-serif;color:#333;}//移動端有默認字體，這樣設置了也不起左右，在此寫上只是習慣
button{outline: none;}
ul,li{list-style: none;}
@media only screen and (min-width: 320px){
html {
font-size: 42.667px!important;
}
}
@media only screen and (min-width: 360px){
html {
font-size: 48px!important;
}
}
@media only screen and (min-width: 375px){
html {
font-size: 50px!important;
}
}
@media only screen and (min-width: 412px){
html {
font-size: 54.933px!important;
}
}
@media only screen and (min-width: 414px){
html {
font-size: 55.2px!important;
}
}
.clearfix:after{
content:"";
display: block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
h2{
height:1rem;
line-height:1rem;
font-size:0.4rem;
background: #c2110c;
color:#fff;
text-align: center;
}
.img-list{
padding:0 0.4rem 0.4rem;
}
.img-list li.on{
border-color: #c2110c;
color:#c2110c;
}
.img-list li{
width:2rem;
height:0.4rem;
line-height:0.44rem;
text-align: center;
font-size: 0.2rem;
float: left;
margin-top:0.28rem;
margin-right: 0.28rem;
-webkit-border-radius:0.08rem;
-moz-border-radius:0.08rem;
border-radius:0.08rem;
border:1px solid #333;
}
.img-list li:nth-child(3n){
margin-right:0;
}
.operat{
margin:0 0.4rem 0.4rem;
}
.operat input{
width:3.4rem;
height:0.4rem;
font-size: 0.25rem;
-webkit-border-radius:0.08rem;
-moz-border-radius:0.08rem;
border-radius:0.08rem;
padding: 0 0.4rem;
outline: none;
border:1px solid #333;
}
.operat button{
height:0.41rem;
width:1rem;
border:none;
background: #c2110c;
color:#fff;
-webkit-border-radius:0.1rem;
-moz-border-radius:0.1rem;
border-radius:0.1rem;
}
.operat p{
margin:0.2rem;
text-align:right;
}
</style>
</head>
<body>
<header>
<h2>元宵節祝福神器</h2>
</header>
<section>
<div class="img-list">
<ul class="clearfix">
<li onclick="changeImg(1)" class="on">金獅鬧春</li>
<li onclick="changeImg(2)">彩燈送福</li>
<li onclick="changeImg(3)">合家團圓</li>
<li onclick="changeImg(4)">雞鬧元宵</li>
<li onclick="changeImg(5)">共度佳節</li>
<li onclick="changeImg(6)">喜迎元宵</li>
<li onclick="changeImg(7)">詩畫送福（1）</li>
<li onclick="changeImg(8)">詩畫送福（2）</li>
<li onclick="changeImg(9)">元宵佳節</li>
</ul>
</div>
<div class="operat">
<input id="name" type="text" placeholder="請輸入您的名字" maxlength="10">
<button class="pro" onclick="drawImage()">生成</button>
<p>溫馨提示：長按圖片可保存到手機或直接發送給朋友！</p>
</div>
<div class="before" style="width:100%;height:100%;text-align: center">
<img id="imgbox" src="images/1.png" alt="" style="width:80%;">
</div>
<div class="pic">
<canvas id="myCanvas" style="display: none;">
您的瀏覽器不支持canvas
</canvas>
</div>
</section>
<script>
var data = [//將每張圖片上字體的樣式、大小、在圖片上的位置記錄下來，以便於換到不同圖片時獲取所需信息（移動端字體樣式並不能這樣設置，字體樣式只適合PC端）
{"family":"微軟雅黑","size":"0.053","x":"0.291","y":"0.515","color":"#fa112e"},
{"family":"微軟雅黑","size":"0.075","x":"0.5","y":"0.645","color":"#030000"},
{"family":"微軟雅黑","size":"0.053","x":"0.5","y":"0.645","color":"#fff"},
{"family":"微軟雅黑","size":"0.053","x":"0.5","y":"0.545","color":"#030000"},
{"family":"微軟雅黑","size":"0.053","x":"0.5","y":"0.755","color":"#030000"},
{"family":"微軟雅黑","size":"0.053","x":"0.2","y":"0.57","color":"#030000"},
{"family":"微軟雅黑","size":"0.053","x":"0.72","y":"0.41","color":"#ed3a50"},
{"family":"微軟雅黑","size":"0.053","x":"0.5","y":"0.54","color":"#030000"},
{"family":"微軟雅黑","size":"0.053","x":"0.5","y":"0.795","color":"#030000"}
]
function changeImg(id){
var imgbox = document.getElementById("imgbox");
imgbox.src = "images/"+id+".png";//將圖片名稱設置為比較簡單的名稱方便與通過id切換
var liList = document.getElementsByTagName("li");
for(var i = 0; i < liList.length; i++){
liList[i].className = "";
}
liList[id-1].className = "on";
}
var canvas = document.getElementById("myCanvas");
function drawImage() {
var name = document.getElementById("name").value;
var html = "";
if(name){
var on = document.getElementsByClassName("on")[0];
var liList = document.getElementsByTagName("li");
var index = getIndex(on,liList); //獲取有on類名的li
var clientWidth = getWidth(); //獲取屏幕寬度用於canvas寬度自適應移動端屏幕
canvas.width = 2*clientWidth; //由於手機屏幕時retina屏，都會多倍渲染，在此只設置2倍，如果直接設置等於手機屏幕，會導致生成的圖片分辨率不夠而模糊
canvas.height = 2*clientWidth*667/375;
var context = canvas.getContext("2d");
var imgbox = document.getElementById("imgbox");
var num = index + 1;
var src = "images/"+num+".png";
var img = new Image();//創建圖片對象，用於在canvas中渲染
img.src=src;
var w = 2*clientWidth;
img.onload = function(){ //當圖片加載成功以后再進行下一步動作，如果不加這句，會生成黑圖
context.drawImage(img, 0, 0, w, w*667/375);//按設計稿圖片比例渲染圖片高度
var font = "600 " + data[index].size*w + "px " + data[index].family;//文字大小也得按照分辨率變化，類似使用rem
context.font = font;
context.textAlign = "center";
context.fillStyle = data[index].color;
if(index == 0){
var x = w*data[index].x;
var oy = data[index].y*w*667/375;
for(var i = 0; i < name.length; i++){
var y = oy + 44*i;
context.fillText(name[i],x,y);
}
}else if(index == 5){//當文字時豎向顯示的時候，以中間為基准，向上向下一行插入一個字
var x = w*data[index].x;
var oy = data[index].y*w*667/375;
for(var i = 0; i < name.length; i++){
var y = oy + 44*i;
context.fillText(name[i],x,y);
}
}else{
context.fillText(name,w*data[index].x,data[index].y*w*667/375);
}
var downloadImg = canvas.toDataURL("image/jpeg");
imgbox.src = downloadImg;
}
}else{
alert("請輸入您的名字！");
}
}
function getWidth(){
if(window.innerWidth){
return window.innerWidth;
}
else{
if(document.compatMode == "CSS1Compat"){
return document.documentElement.clientWidth;
}
else{
return document.body.clientWidth;
}
}
}
function getIndex(current,obj){
var length = obj.length
for(var i = 0; i<length; i++) {
if (obj[i] == current) {
return i;
}
}
}
</script>
<script src="http://zishu010.com/JS/baidu_statistics.js?v=2.0.5"></script>
</body>
</html>
