ImageZoom: add nearest neighbour (#1341)

src/plugins/imageZoom/components/Magnifier.tsx

@@ -156,7 +156,7 @@ export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSiz
 
     return (
         <div
-            className="vc-imgzoom-lens"
+            className={`vc-imgzoom-lens ${settings.store.nearestNeighbour ? "nearest-neighbor" : ""}`}
             style={{
                 opacity,
                 width: size.current + "px",

src/plugins/imageZoom/index.tsx

@@ -50,6 +50,12 @@ export const settings = definePluginSettings({
         default: true,
     },
 
+    nearestNeighbour: {
+        type: OptionType.BOOLEAN,
+        description: "Use Nearest Neighbour Interpolation when scaling images",
+        default: false,
+    },
+
     zoom: {
         description: "Zoom of the lens",
         type: OptionType.SLIDER,

src/plugins/imageZoom/styles.css

@@ -11,6 +11,10 @@
     pointer-events: none;
 }
 
+.vc-imgzoom-lens.nearest-neighbor > img {
+    image-rendering: pixelated; /* https://googlechrome.github.io/samples/image-rendering-pixelated/index.html */
+}
+
 /* make the carousel take up less space so we can click the backdrop and exit out of it */
 [class|="carouselModal"] {
     height: fit-content;