1

2つの画像(大と小)を必要としない、ホバー時のjqueryまたはjavascript画像拡大鏡を探しています。私は何時間も検索しましたが、言われたとおりに機能するものは見つかりませんでした.

  • アイズーム、
  • jQズーム、
  • tjpズーム、
  • 画像拡大、
  • イメージズーム、
  • イメージレンズ、
  • ルーペ

すべて試してみましたが、現在の構成では何らかの理由で機能しません。

したがって、この時点で、「jquery Image Magnifier」から 25 ページの結果を調べましたが、何も機能しなかったため、Google 以外の結果を探しています。

4

1 に答える 1

3

非表示のキャンバスに画像の複製をレンダリングし、マウス位置の周りの長方形を取得して、この部分の拡大を 2 番目の可視キャンバスにレンダリングできます。これは、プレーンな 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 に答える