jquery仿盖章效果并获取合成后的图片

本文链接：https://blog.csdn.net/az44yao/article/details/100565036

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿电子印章在线制作代码 - xw素材网</title>
<link href="jquery.zsign.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.zsign.js" type="text/javascript"></script>
</head>
<body>
<div id="test" style="width:595px;height:418px;border:1px solid red;margin:40px auto; position:relative;"><img src="images/asd233234.png" /></div>
<input type="button" id="btn1" value="获取位置"/>
<div id="imgBox" align="center">
  <input type="button" value="获取合成后的图片" onclick="hecheng()">
</div>

<script>
function hecheng(){
	draw(function(){
		document.getElementById('imgBox').innerHTML='<p style="padding:10px 0">合成图片成功！可以鼠标另存图片查看我是否是一张图片~~！</p><img src="'+base64[0]+'">';
	})	
}

var data=['images/asd233234.png','images/1.gif'],base64=[];
function draw(fn){
	var c=document.createElement('canvas'),
		ctx=c.getContext('2d'),
		len=data.length;
	c.width=$("#test").width();
	c.height=$("#test").height();
	ctx.rect(0,0,c.width,c.height);
	ctx.fillStyle='#fff';
	ctx.fill();
	
	
	
	
	function drawing(n){
		if(n<len){
			var img=new Image;
			//img.crossOrigin = 'Anonymous'; //解决跨域
			img.src=data[n];
			img.onload=function(){
			if(n==0)
			{
				ctx.drawImage(img,0,0,c.width,c.height);
				}else
				{
				
				ctx.drawImage(img,$(".sign").position().left+10,$(".sign").position().top+10,$(".sign").width(),$(".sign").height());
				}
				drawing(n+1);//递归
			}
		}else{
			//保存生成作品图片
			base64.push(c.toDataURL("image/jpeg",0.8));
			//alert(JSON.stringify(base64));
			fn();
		}
	}
	drawing(0);
}
</script>

<script>
var a =$("#test").zSign({ img: 'images/1.gif'});
$().ready(function()
{
$('#btn1').click(function(){
console.log($(".sign").position());
})
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.xwcms.net/" target="_blank">xw素材网</a></p>
</div>
</body>
</html>

图片合成需在web服务器下浏览，在文件系统打开不能看到效果

例子 https://download.csdn.net/download/az44yao/11679059