Skip to main content

Interactive Magnifying Glass Effect

· One min read
Kirill Vasin

This code creates a magnifying glass effect over an image in Wolfram Language. As the mouse moves over the image, a zoomed-in circular region follows the cursor, simulating a magnifying lens.

🔧 How it works:​

  • takeImagePart: Extracts and resizes a square region of the image around a given position.
  • magnifyingGlass: Displays the full image in a graphics canvas with a circular “lens” that updates in real time using EventHandler. The lens dynamically shows a magnified version of the area under the cursor.

It uses low-level image manipulation (ImageTake, ImageCrop, ImageResize) and efficient buffer updates with ImageData for performance.

Download original notebook 
takeImagePart[i_Image, position_, size_:0.1] := With[{
  dims = ImageDimensions[i] {ImageAspectRatio[i],1}
}, With[{
  part = {position - (*FB[*)((size dims)(*,*)/(*,*)(2.0))(*]FB*), position + (*FB[*)((size dims)(*,*)/(*,*)(2.0))(*]FB*)} // Round // Transpose
},
  ImageResize[ImageCrop[ImageTake[i, Sequence @@ part[[{2,1}]]], Round[size dims]], Scaled[5]]
] ]

magnifyingGlass[i_Image] := Module[{
  p = {0,0}, buffer = ImageData[takeImagePart[i, {0,0}], "Byte"]
}, With[{
  canvas = Graphics[{
    Inset[i, ImageDimensions[i]/2],
    (*VB[*)(RGBColor[1, 0, 0])(*,*)(*"1:eJxTTMoPSmNiYGAo5gUSYZmp5S6pyflFiSX5RcEsQBHn4PCQNGaQPAeQCHJ3cs7PyS8qYgCDD/ZQBgMDnAEA4iUPRg=="*)(*]VB*), Circle[p//Offload, Scaled[0.05{1,1/ImageAspectRatio[i]}]]
  }, 
    ImagePadding->0, "Controls"->False,
    PlotRange-> Transpose[{{0,0}, ImageDimensions[i]}],
    ImageSize->(ImageDimensions[i]/FrontFetch[Graphics`DPR[]])
  ]
},
  Labeled[EventHandler[canvas, {"mousemove" -> Function[position,
    buffer = ImageData[takeImagePart[i, {0,1} ImageDimensions[i] + {1,-1} position], "Byte"];
    p = position;
  ]}], Image[buffer // Offload, "Byte"], Right]
] ]
(*VB[*)(FrontEndRef["c5af8cfd-9848-47b8-8292-eb9a23b501c2"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKJ5smplkkp6XoWlqYWOiamCdZ6FoYWRrppiZZJhoZJ5kaGCYbAQCNCxWx"*)(*]VB*) // magnifyingGlass