Увеличитель изображений jQuery Javascript

#javascript #jquery #image-manipulation #mousehover #magnify

#javascript #jquery #манипулирование изображениями #наведение курсора мыши #увеличивать #увеличить

Вопрос:

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

iZoom,
jQZoom (масштабирование),
тджПзум,
Увеличить изображение,
ImageZoom,
ImageLens,
Лупа

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

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

1. Почему бы не создать свой собственный? Это просто animate({width: '100%'}) , если изображение уменьшено.

2. Если все большие плагины у вас не работают, что такого уникального в вашей ситуации?

3. Я бы не советовал использовать только одно изображение, поскольку в этом случае должны быть загружены все большие изображения, что потребляет большую пропускную способность.

4. Посмотрите на это dynamicdrive.com/dynamicindex4/imagemagnify.htm кажется, что здесь используется одно изображение, но при очевидном увеличении того же самого оно становится пикселизированным.

5. @satish — Я пробовал это, и в нем есть ошибки

Ответ №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 наблюдается значительное замедление после некоторого зависания