javascript在图像上绘制矩形

问题描述：

我正在做一个使用java脚本的php项目。我尝试在使用javascript的图像上绘制矩形。矩形可以绘制任何尺寸的图像，与任何图像比较尺寸也显示绘图的共同坐标rectangle.Please任何一个可以帮助我...我尝试不同的方法.....javascript在图像上绘制矩形

<STYLE> 
    #rubberBand { 
    position: absolute; 
    visibility: hidden; 
    width: 0px; height: 0px; 
    border: 2px solid red; 
} 
</STYLE> 

</HEAD> 
<BODY> 
<img name="myImage" id="myImage" src="a.jpg"> 


<DIV ID="rubberBand"></DIV> 

<SCRIPT> 

var IMG; 

    function startRubber (evt) { 
    if (document.all) { 

     var r = document.all.rubberBand; 
     r.style.width = 0; 
     r.style.height = 0; 
     r.style.pixelLeft = event.x; 
     r.style.pixelTop = event.y; 
     r.style.visibility = 'visible'; 
     IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image 
    } 
    else if (document.getElementById) { 
    // firefox 
    evt.preventDefault(); 
    var r = document.getElementById('rubberBand'); 
    r.style.width = 0; 
    r.style.height = 0; 
    r.style.left = evt.clientX + 'px'; 
    r.style.top = evt.clientY + 'px'; 
    r.style.visibility = 'visible'; 
    r.onmouseup = stopRubber; 
    } 
    IMG.onmousemove = moveRubber; 
    } 
    function moveRubber (evt) { 
    if (document.all) { // IE 
    var r = document.all.rubberBand; 
    r.style.width = event.x - r.style.pixelLeft; 
    r.style.height = event.y - r.style.pixelTop; 
    } 
    else if (document.getElementById) { // firefox 
    var r = document.getElementById('rubberBand'); 
    r.style.width = evt.clientX - parseInt(r.style.left); 
    r.style.height = evt.clientY - parseInt(r.style.top); 
    } 
    return false; // otherwise IE won't fire mouseup :/ 
    } 
    function stopRubber (evt) { 
    IMG.onmousemove = null; 
    } 

    function cancelDragDrop() 
    { 
    window.event.returnValue = false; 
    } 

    IMG = document.getElementById('myImage'); 
    IMG.onmousedown = startRubber; 
    IMG.onmouseup = stopRubber; 

</SCRIPT>

你尝试过什么办法呢？调整大小的图像？帆布？闪？ – 2012-02-22 14:53:42

显示你的尝试，我们会尽力帮助解决它。但我们不会为您编写代码。 – 2012-02-22 14:54:02

你试过这些不同的方式是什么？你如何加载图像？这是客户端JavaScript吗？你需要有完整的跨浏览器兼容性吗？ – Ryan 2012-02-22 14:54:28

答

您需要的包装，所以你可以绝对位置的元素里面。尺寸会有所不同，具体取决于您的照片和您想要的框。

HTML：

<div class="wrapper"> 
    <img src="...." /> 
    <div class="box"></div> 
</div>

CSS：

.wrapper { 
    position:relative; 
} 

.box { 
    position:absolute; 
    top:10px; 
    left:10px; 
    width:50px; 
    height:50px; 
    border:2px solid #ffffff; 
    background-color:transparent 
}

javascript在图像上绘制矩形

相关推荐