JQuery Javascript лупа изображения - PullRequest
Новая
       12

JQuery Javascript лупа изображения

1 голос
/ 20 мая 2011

Я ищу увеличитель изображения jquery или javascript при наведении курсора, который не требует двух изображений (большого и малого) для работы. Я искал часы и не нашел ничего, что работает так, как они говорят.

  • iZoom,
  • jQZoom
  • tjpZoom
  • Увеличение изображения,
  • ImageZoom,
  • ImageLens
  • Лупа

все были опробованы и не работают по той или иной причине с моей текущей конфигурацией.

Итак, на данный момент я ищу результаты, не связанные с поиском в Google, так как я просмотрел 25 страниц результатов из 'jquery Image Magnifier' и ничего не помогло.

1 Ответ

1 голос
/ 20 августа 2013

Вы можете визуализировать дубликат изображения на скрытом холсте, захватить прямоугольник вокруг позиции мыши и визуализировать увеличение этой части на втором видимом холсте. Это написано в очень немногих строках кода - даже в простом 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 после некоторого зависания наблюдается значительное замедление
...