<!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服务器下浏览,在文件系统打开不能看到效果