纯JavaScript图像抓取缩放？

Question

过去，我遇到过http://www.jacklmoore.com/zoom/ ，这是一个很好的发现，并且可以很容易地用于各种图像。 我正在寻找使用纯JavaScript而不是jQuery的抓取缩放功能。 是否有任何纯Java解决方案？ 到目前为止，我还没有运气尝试过此操作：

使用Javascript：

    var imgSize = 1;
function zoomIn() {
imgSize += 0.1;
document.body.style.imgSize = imgSize + "em";
}
function zoomOut() {
    imgSize -= 0.1;
    document.body.style.imgSize = imgSize + "em";
}

HTML

<img src="picture.png" value="+" onClick="zoomIn()"/>

在此先感谢您提供任何有用的提示！

Answer 1

一般的想法是显示较小尺寸的图像（“原始”），并且当鼠标悬停在容器上时，将显示容器的背景图像。 背景图片很大，CSS背景被容器的大小裁剪。 跟踪鼠标事件。 您必须自己计算测量和数学。

<div id="imageview" style="position:relative;width:300px;height:200px;"
>
  <img src="300x200.jpg" id="original" onmouseover="this.style.display='none';">

</div>

<script>

  document.getElementById('imageview').onmouseover=function(e){
    document.getElementById('original').style.display='none';
    var x,y;
    if (e) {x=e.clientX;y=e.clientY;} else {x=event.clientX; y=event.clientY;}

    document.getElementById('imageview').orgx=x;
    document.getElementById('imageview').orgy=y;

  }

  document.getElementById('imageview').onmousemove=function(e){
    var x,y;
    if (e) {x=e.clientX;y=e.clientY;} else {x=event.clientX; y=event.clientY;}

    var orgx=document.getElementById('imageview').orgx;
    var orgy=document.getElementById('imageview').orgy;

    //now you have x, y, orgx, and org y, so you can do some math
    // ...

    var posx, posy;

    document.getElementById('imageview').backgroundImage='url(600x400.jpg)';
    document.getElementById('imageview').backgroundPosition=-1*posx+'px '+ -1*posy+'px';


  }

</script>

Answer 2

请尝试使用此图像缩放库（由我编写）： https : //github.com/kingdido999/zooming

它是用纯JavaScript实现的，没有任何额外的依赖。