Question

我正在寻找悬停时的jquery或javascript图像放大镜，不需要两个图像（大小）。我已经搜索了几个小时，但没有按照他们的说法找到任何工作。

iZoom，
jQZoom，
tjpZoom，
图像放大，
ImageZoom，
ImageLens，
放大镜

已经尝试过，并且因为我当前的配置而出于某种原因无法正常工作。

所以在这一点上我正在寻找非googled结果，因为我已经浏览了'jquery Image Magnifier'的25页结果，但没有任何效果。

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

有一个改进版本的链接，具有可调节的圆形镜头，具有灯光效果和桶形失真。也适用于画布。

限制：

不适用于跨域图像网址
在IE的旧版本中不起作用
在当前版本的Firefox 25中，在停留一段时间后显着放缓

jQuery Javascript图像放大镜

1 个答案: