1

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

  • iZoom,
  • jQZoom,
  • tjp缩放，
  • 图像放大，
  • 图像缩放，
  • 影像镜头，
  • 放大镜

都已经尝试过，并且由于某种原因无法使用我当前的配置。

所以在这一点上，我正在寻找非谷歌搜索的结果，因为我已经浏览了来自“jquery Image Magnifier”的 25 页结果，但没有任何效果。

4

1 回答 1

3

您可以在隐藏的画布中渲染图像的副本，在鼠标位置周围抓取一个矩形，然后在第二个可见画布中渲染该部分的放大图。它是用很少几行代码编写的——即使是纯 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 中，经过一段时间的悬停后速度明显放缓
于 2013-08-20T15:05:12.903 回答