jQuery Javascript圖像放大鏡

我正在尋找一個jQuery或JavaScript圖像放大鏡懸停，不需要兩個圖像（大和小）工作。我已經搜索了幾個小時，並沒有找到任何工作的方式，他們說。jQuery Javascript圖像放大鏡

iZoom，
jQZoom，
tjpZoom，
放大顯示圖像，
ImageZoom，
ImageLens，
放大鏡

都被嘗試和唐因爲某種原因，我不會以某種理由工作當前配置。

所以在這一點上，我正在尋找非谷歌搜索結果，因爲我已經從'jquery Image Magnifier'搜索了25頁的結果，而且沒有任何結果。

來源

2011-05-20 sadmicrowave

爲什麼不製造自己的？如果圖像縮小，這是一個簡單的'animate（{width：'100％'}）''。 – Blender 2011-05-20 16:02:43

如果所有的大插件都不適合你，那麼你的情況有什麼獨特之處？ – 2011-05-20 16:03:00

我不會建議只使用一個圖像，因爲在消耗大量帶寬的情況下必須加載所有大圖像。 – pimvdb 2011-05-20 16:03:32

您可以在隱藏的畫布中渲染圖像的副本，抓住鼠標位置周圍的矩形，並在第二個可見畫布中渲染此部分的放大圖。這是寫在代碼非常幾行 - 即使是在普通的JavaScript：

var zoom = function(img){ 
    var canS = document.createElement('canvas'), 
     can = document.createElement('canvas'), 
     ctxS = canS.getContext('2d'), 
     ctx = can.getContext('2d'), 
     id = ctx.createImageData(240,240), 
     de = document.documentElement; 
    can.className = 'zoom'; 
    can.width = can.height = 240; 
    canS.width = img.width; 
    canS.height = img.height; 
    img.parentElement.insertBefore(can,img.nextSibling); 
    ctxS.drawImage(img,0,0); 
    img.onmousemove = function(e){ 
     var idS=ctxS.getImageData(
      e.clientX-e.target.offsetLeft+(window.pageXOffset||de.scrollLeft)-20, 
      e.clientY-e.target.offsetTop+(window.pageYOffset||de.scrollTop)-20, 
      40,40); 
     for (var y=0;y<240;y++) 
      for (var x=0;x<240;x++) 
       for (var i=0;i<4;i++) 
        id.data[(240*y+x)*4+i] = idS.data[(40*~~(y/6)+~~(x/6))*4+i]; 
     ctx.putImageData(id,0,0); 
    } 
}

實施例： http://kirox.de/test/magnify.html

有一種改進的版本的鏈接，設有帶光效果和桶形失真的可調整圓形透鏡。也可用於畫布。

限制：

不跨域圖像的URL工作
無法在Firefox 25的當前版本工作在舊版本的IE
有一陣子之後顯著放緩盤旋

來源

2013-08-20 15:05:12 oyophant

有趣的解決方案。但是，下一次嘗試提供一些代碼和解釋，而不僅僅是一個URL。 – Cthulhu 2013-12-03 12:25:25

只是編輯了答案 – oyophant 2013-12-06 15:09:19

jQuery Javascript圖像放大鏡

回答

相關問題