javascript - 纯 JavaScript 图像抓取缩放？

Question

过去我遇到过http://www.jacklmoore.com/zoom/这是一个很棒的发现，而且对于各种图像来说使用起来非常简单。我正在寻找使用纯 javascript 而不是 jQuery 的抓取缩放功能。有没有纯Javascript的解决方案？到目前为止我已经尝试过但没有运气:

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>