Plot.image supports imageRendering (#1267)

Co-authored-by: Mike Bostock <[email protected]>

Author: Fil

README.md

@@ -1636,8 +1636,9 @@ The following image-specific constant options are also supported:
 * **frameAnchor** - the [frame anchor](#frameanchor); defaults to *middle*
 * **preserveAspectRatio** - the [aspect ratio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio); defaults to “xMidYMid meet”
 * **crossOrigin** - the [cross-origin](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/crossorigin) behavior
+* **imageRendering** - the [image-rendering attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/image-rendering); defaults to *auto* (bilinear)
 
-To crop the image instead of scaling it to fit, set **preserveAspectRatio** to “xMidYMid slice”.
+To crop the image instead of scaling it to fit, set **preserveAspectRatio** to “xMidYMid slice”. The **imageRendering** option may be set to *pixelated* to disable bilinear interpolation on enlarged images; however, note that this is not supported in WebKit.
 
 Images are drawn in input order, with the last data drawn on top. If sorting is needed, say to mitigate overplotting, consider a [sort and reverse transform](#transforms).
 
@@ -1834,7 +1835,7 @@ The following raster-specific constant options are supported:
 * **imageRendering** - the [image-rendering attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/image-rendering); defaults to *auto* (bilinear)
 * **blur** - a non-negative pixel radius for smoothing; defaults to 0
 
-The **imageRendering** option may be sent to *pixelated* to disable bilinear interpolation for a sharper image; however, note that this is not supported in WebKit. The **interpolate** option is ignored when **fill** or **fillOpacity** is a function of *x* and *y*.
+The **imageRendering** option may be set to *pixelated* to disable bilinear interpolation for a sharper image; however, note that this is not supported in WebKit. The **interpolate** option is ignored when **fill** or **fillOpacity** is a function of *x* and *y*.
 
 #### Plot.raster(*data*, *options*)
 

src/marks/image.js

@@ -40,7 +40,7 @@ function maybePathChannel(value) {
 
 export class Image extends Mark {
   constructor(data, options = {}) {
-    let {x, y, width, height, src, preserveAspectRatio, crossOrigin, frameAnchor} = options;
+    let {x, y, width, height, src, preserveAspectRatio, crossOrigin, frameAnchor, imageRendering} = options;
     if (width === undefined && height !== undefined) width = height;
     else if (height === undefined && width !== undefined) height = width;
     const [vs, cs] = maybePathChannel(src);
@@ -64,6 +64,7 @@ export class Image extends Mark {
     this.preserveAspectRatio = impliedString(preserveAspectRatio, "xMidYMid");
     this.crossOrigin = string(crossOrigin);
     this.frameAnchor = maybeFrameAnchor(frameAnchor);
+    this.imageRendering = impliedString(imageRendering, "auto");
   }
   render(index, scales, channels, dimensions, context) {
     const {x, y} = scales;
@@ -104,6 +105,7 @@ export class Image extends Mark {
           .call(applyAttr, "href", S ? (i) => S[i] : this.src)
           .call(applyAttr, "preserveAspectRatio", this.preserveAspectRatio)
           .call(applyAttr, "crossorigin", this.crossOrigin)
+          .call(applyAttr, "image-rendering", this.imageRendering)
           .call(applyChannelStyles, this, channels)
       )
       .node();

test/output/imagePixelated.svg

@@ -0,0 +1,11 @@
+import * as Plot from "@observablehq/plot";
+
+export async function imagePixelated() {
+  return Plot.image([0], {
+    frameAnchor: "middle",
+    src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAAXNSR0IArs4c6QAAACNJREFUGFdjVBaX/s/TdotBLrqfgfHeXaP/Ek3PGGatfcEAAHifCmZc3SIiAAAAAElFTkSuQmCC",
+    width: 300,
+    height: 200,
+    imageRendering: "pixelated"
+  }).plot({width: 300, height: 200});
+}

test/plots/image-rendering.js

@@ -289,6 +289,7 @@ export * from "./federal-funds.js";
 export * from "./frame.js";
 export * from "./function-contour.js";
 export * from "./heatmap.js";
+export * from "./image-rendering.js";
 export * from "./legend-color.js";
 export * from "./legend-opacity.js";
 export * from "./legend-symbol.js";