为图片添加斜体水印并保存水印图片

最近遇到个需求，使用手机扫码签名，手机的签名画板需要支持添加平铺的斜体文字水印，然后保存的签名图片也需要水印，这里是分享下如何给图片加斜体水印，先将图片放入到canvas画布中，利用canvas的绘制功能为图片添加斜体的文字水印，然后将整个canvas转成图片保存。

function addWatermark(image, text) { 
	  // 获取画布元素，并设置其宽高和图片一样  
	  var canvas = document.getElementById("myCanvas"); 
	  canvas.width = image.width; 
	  canvas.height = image.height; 
	  // 坐标(0,0) 表示从此处开始绘制，相当于偏移。 
	  canvas.getContext("2d").drawImage(image, 0, 0);  
	 //绘制斜体水印到canvas上，添加8行8列
	 for (var i =0; i < 8; i++) {
	 	for (var j=0; j< 8; j++) {
	 		//设置文字的水平偏转角度
			canvas.rotate((45 * Math.PI) / 180);
			//设置文字的字体
			canvas.font = "18px microsoft yahei";
			//设置字体颜色
			canvas.fillStyle = "#DBDBDB";
			//填充水印，（水印文字， X轴偏移距离， Y轴偏移距离）
			canvas.fillText(text, i * 200, -200 + (j * 100));
			//由于是循环加，所以要把角度给偏转回来，要不然会从此角度开始一直转
			canvas.rotate((-45 * Math.PI) / 180);
		}
	 }
}

function submit() {
	var canvas = document.getElementById("myCanvas");
	//转换返回的是一串Base64编码的URL
	var image = canvas.toDataURL("image/png");
	//替换转义符号，然后传到后台使用byte[] b = Base64.decodeBase64(imageParam);
	var imageParam = image.replace(/^data:image\/(png|jpg);base64,/,"");
	........
}