js+h5图片文字合成技术

在html文件中创建画布标记：

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

画布创建好之后，将准备好的图片画在画布上，然后将想要添加的文字也画在画布上，最后保存新生成的画布成图片即可，具体代码如下：

// 绘制图片

var tempImg = new Image();

tempImg.src = "";//准备好的图片

tempImg.onload = function(){

ctx.drawImage(tempImg,0,0);//将图片按照x,y坐标画在画布上，实际开发过程x,y的坐标不是很准，得自己调整

ctx.font="35px microsoft yahei";//设置画笔的字体大小和格式

ctx.fillStyle = "rgba(255,255,255,1)";//设置字体的颜色

ctx.fillText("测试",10,50);//将文字信息画在画布上，按照x,y的坐标，在手机上坐标不是很准确

var d = canvas.toDataURL("png");//将画布当前状态生成对应的base64串；

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

}

图片的文字的合成技术已经完成，由于生成的是base64的字符串，可以使用第三方js库将base64串生成图片的文件形式，

由于我在开发过程中是混合app开发，所以使用了原生的方式将base64转化成了对应的图片保存在手机本地，此处是js+h5的主题，所以原生的方式就不列出了，因为已经实现了核心的合成技术，剩下的就比较简单了；