在html文件中創(chuàng)建畫布標記：

<canvas id="canvas" width="" height="" style="background-color:#ffffff;"></canvas>

畫布創(chuàng)建好之后，將準備好的圖片畫在畫布上，然后將想要添加的文字也畫在畫布上，最后保存新生成的畫布成圖片即可，具體代碼如下：

// 繪制圖片

var tempImg = new Image();

tempImg.src = "";//準備好的圖片

tempImg.onload = function(){

ctx.drawImage(tempImg,0,0);//將圖片按照x,y坐標畫在畫布上，實際開發(fā)過程x,y的坐標不是很準，得自己調(diào)整

ctx.font="35px microsoft yahei";//設(shè)置畫筆的字體大小和格式

ctx.fillStyle = "rgba(255,255,255,1)";//設(shè)置字體的顏色

ctx.fillText("測試",10,50);//將文字信息畫在畫布上，按照x,y的坐標，在手機上坐標不是很準確

var d = canvas.toDataURL("png");//將畫布當前狀態(tài)生成對應(yīng)的base64串；

ctx.clearRect(0,0,canvas.width,canvas.height);//清除畫布

}

圖片的文字的合成技術(shù)已經(jīng)完成，由于生成的是base64的字符串，可以使用第三方j(luò)s庫將base64串生成圖片的文件形式，

由于我在開發(fā)過程中是混合app開發(fā)，所以使用了原生的方式將base64轉(zhuǎn)化成了對應(yīng)的圖片保存在手機本地，此處是js+h5的主題，所以原生的方式就不列出了，因為已經(jīng)實現(xiàn)了核心的合成技術(shù)，剩下的就比較簡單了；