ImageZoom: add nearest neighbour (#1341)

This commit is contained in:
Syncx 2023-06-28 06:41:19 +10:00 committed by GitHub
parent 5e71ed286e
commit 4fe2845234
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 1 deletions

View file

@ -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",

View file

@ -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,

View file

@ -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;