在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的主题,所以原生的方式就不列出了,因为已经实现了核心的合成技术,剩下的就比较简单了;