jQuery Javascript 圖像放大鏡

Question

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

• iZoom，
• jQZoom，
• tjp縮放，
• 圖像放大，
• 圖像縮放，
• 圖像鏡頭，
• 放大鏡

都已嘗試過，但由於一種或另一種原因而無法使用我當前的配置。

所以在這一點上，我正在尋找非谷歌搜索的結果，因為我已經瀏覽了 25 頁來自“jquery Image Magnifier”的結果，但沒有任何效果。

Answer 1

您可以在隱藏畫布中渲染圖像的副本，在鼠標位置周圍抓取一個矩形，然后在第二個可見畫布中渲染該部分的放大圖。 它是用很少的代碼行編寫的——即使是純 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
• 在舊版本的 IE 中不起作用
• 在當前版本的 Firefox 25 中，經過一段時間的懸停后速度會顯着降低