纯JavaScript图像抓取缩放？

在过去，我遇到了http://www.jacklmoore.com/zoom/这是一个伟大的发现和非常简单的用于各种图像。我正在寻找使用pure-javascript而不是jQuery的抓取缩放功能。有没有任何Pure-Javascript解决方案？纯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()"/>

预先感谢任何有用的技巧！

来源

2014-03-05 user3261881

一般的想法是显示较小尺寸的图像（“原始”），当鼠标悬停在容器上时，容器的背景图像被显示出来。背景图片很大，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>

来源

2014-03-05 05:18:08 Schien

这个评论是好的，但我一直在寻找可点击的解决方案。就像你点击原始图像一样，它会“缩放”，如果你点击“缩放”图像，它会再次显示原始图像。非常感谢你的建议，尽管我会尝试使用你的代码并从那里开始。 – user3261881

你可以把它放在jsfiddle吗？ – Muhaimin

请给这个图像缩放库（由我写的）一试：https://github.com/kingdido999/zooming

它在纯JavaScript实现的，没有额外的依赖。

来源

2016-11-01 14:44:48 Desmond

在宣传你的图书馆时，你应该始终在你的答案中公开你的联系。 – Steve

编辑我的评论。感谢您的建议。 – Desmond

纯JavaScript图像抓取缩放？

回答

相关问题