用javascript测试图片是否重合或是吻合

     用javascript测试图片重合或是吻合：在屏幕的两个不同的位置显示两张相同的图片，当用鼠标左键选中某一张图片并且拖动它放到另外的一张图片的上面时，显示正确的结果（实现了相同图片的重合）；否则两张图片不重合。
     不知道有什么函数或是其他的方法做到检验图片是否重合或是吻合。
       请高手指点一下下，谢谢！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

if(img1.src==img2.src &&
  img1.width==img2.width &&
  img1.height==img2.height){
  alert('重合');
}
不好意思，我忘记说了。多边形的图片是可以以一定的角度旋转的。当旋转的角度不一样时，仅仅靠宽度和高度，下面的代码，也不能够完全判断两张图片吻合、重合啊。
if(img1.src==img2.src &&
  img1.width==img2.width &&
  img1.height==img2.height){
  alert('重合');
}
希望高人多给小弟指点指点，谢谢了
有分的哦
那就不是JavaScript的事情了……
是用javascript实现旋转了一定的角度的啊。
听说js可以实现读取两张图片，然后判断是否重合。但是不知道js是否可以做到：即使两张图片完全一样（图片的高度、宽度、像素都一样），当他们旋转不同的角度时，得出的判断是两张图片不吻合的呢？
两张图片的   left 和 TOP 属性是一样的不就重合了？？？
旋转代码(输出了4张图片)如下： <!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=gb2312" />
<title>无标题文档 </title>
</head>
<script language="javascript">
var i=1;
　function playImg1()
　{
image1.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
　 
　 }
</script> <script language="javascript">
var i=1;
　function playImg2()
　{
image2.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
　 
　 }
</script> <script language="javascript">
var i=1;
　function playImg3()
　{
image3.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
　 
　 }
</script> <script language="javascript">
var i=1;
　function playImg4()
　{
image4.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
　 
　 }
</script>
<body oncontextmenu="return false">
<style>

</style>
<script language="JavaScript">
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
</script>
<img src="picture/1.gif" name="image1" class="drag" height="150" width="150" oncontextmenu="playImg1()">
<img src="picture/2.gif" name="image2" class="drag" height="150" width="150" oncontextmenu="playImg2()">
<img src="picture/3.gif" name="image3" class="drag" height="150" width="150" oncontextmenu="playImg3()">
<img src="picture/4.gif" name="image4" class="drag" height="150" width="150" oncontextmenu="playImg4()">
</body>
</html>
<!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=gb2312" />
<title>无标题文档 </title>
</head>
<script language="javascript">
var i=1;
　function playImg1()
　{
image1.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
　 
　 }
</script> <script language="javascript">
var i=1;
　function playImg2()
　{
image2.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
　 
　 }
</script> <script language="javascript">
var i=1;
　function playImg3()
　{
image3.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
　 
　 }
</script> <script language="javascript">
var i=1;
　function playImg4()
　{
image4.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
　 
　 }
</script>
<body oncontextmenu="return false">
<style>

</style>
<script language="JavaScript">
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}}
function drags(){
if (!document.all||event.button!=1)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
z.style.zIndex=100;
document.onmousemove=move
}}
document.onmousedown=drags
document.onmouseup=function()
{
if(dragapproved)//存在移动时
{
  if(!document.all)return;
  var tag=z;
  var num=parseInt(tag.name.replace("image",""));  var obj;
  for(var i=1;i<=4;i++)
  {
    if(i==num)continue;
    obj=document.getElementsByName("image"+i)[0];
    if(!obj)continue;
    if((obj.offsetLeft==tag.offsetLeft)&&(tag.offsetTop==obj.offsetTop)&&(tag.style.filter==obj.style.filter))
      alert(obj.name+"和"+tag.name+"重合！");
  }
}
dragapproved=false;
}//new Function("dragapproved=false")
</script>
<img src="picture/1.gif" name="image1" alt="image1" style="filter:progid:DXImageTransform.Microsoft.BasicImage(Rotation=4)" class="drag" height="150" width="150" oncontextmenu="playImg1()">
<img src="picture/2.gif" name="image2" alt="image2" style="filter:progid:DXImageTransform.Microsoft.BasicImage(Rotation=4)" class="drag" height="150" width="150" oncontextmenu="playImg2()">
<img src="picture/3.gif" name="image3" alt="image3" style="filter:progid:DXImageTransform.Microsoft.BasicImage(Rotation=4)" class="drag" height="150" width="150" oncontextmenu="playImg3()">
<img src="picture/4.gif" name="image4" alt="image4" style="filter:progid:DXImageTransform.Microsoft.BasicImage(Rotation=4)" class="drag" height="150" width="150" oncontextmenu="playImg4()">
</body>
</html>