ImageZoom: add nearest neighbour (#1341)
This commit is contained in:
parent
5e71ed286e
commit
4fe2845234
@ -156,7 +156,7 @@ export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSiz
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="vc-imgzoom-lens"
|
className={`vc-imgzoom-lens ${settings.store.nearestNeighbour ? "nearest-neighbor" : ""}`}
|
||||||
style={{
|
style={{
|
||||||
opacity,
|
opacity,
|
||||||
width: size.current + "px",
|
width: size.current + "px",
|
||||||
|
@ -50,6 +50,12 @@ export const settings = definePluginSettings({
|
|||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
nearestNeighbour: {
|
||||||
|
type: OptionType.BOOLEAN,
|
||||||
|
description: "Use Nearest Neighbour Interpolation when scaling images",
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
|
||||||
zoom: {
|
zoom: {
|
||||||
description: "Zoom of the lens",
|
description: "Zoom of the lens",
|
||||||
type: OptionType.SLIDER,
|
type: OptionType.SLIDER,
|
||||||
|
@ -11,6 +11,10 @@
|
|||||||
pointer-events: none;
|
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 */
|
/* make the carousel take up less space so we can click the backdrop and exit out of it */
|
||||||
[class|="carouselModal"] {
|
[class|="carouselModal"] {
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
|
Loading…
Reference in New Issue
Block a user