我正在寻找一个jquery或javascript图像放大镜,它不需要两个图像(大和小)就可以工作。我已经搜索了几个小时,但没有找到任何像他们所说的那样工作的方法。
- 变焦,
- jQZoom,
- tjpZoom,
- 图像放大,
- 图像缩放,
- 图像镜头,
- 放大镜
都尝试过,但由于某种原因无法使用我当前的配置。
因此,在这一点上,我正在寻找非谷歌搜索的结果,因为我已经浏览了"jquery 图像放大镜"的 25 页结果,但没有任何效果。
您可以在隐藏的画布中渲染图像的副本,在鼠标位置周围抓取一个矩形,然后在第二个可见画布中渲染该部分的放大倍数。它是用很少的代码行编写的 - 即使是用普通的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中,在悬停一段时间后速度显着下降