fix(ui): image quality degradation while saving images

The HTML Canvas context has an `imageSmoothingEnabled` property which defaults to `true`. This causes the browser canvas API to, well, apply image smoothing - everything gets antialiased when drawn.

This is, of course, problematic when our goal is to be pixel-perfect. When the same image is drawn multiple times, we get progressive image degradation.

In `CanvasEntityObjectRenderer.cloneObjectGroup()`, where we use Konva's `Node.cache()` method to create a canvas from the entity's objects. Here, we were not setting `imageSmoothingEnabled` to false. This method is used very often by the compositor and we end up feeding back antialiased versions of the image data back into the canvas or generation backend.

Disabling smoothing here appears to fix the issue. I've also disabled image smoothing everywhere else we interact with a canvas rendering context.

Author: psychedelicious

invokeai/frontend/web/src/features/controlLayers/konva/CanvasCompositorModule.ts

@@ -126,6 +126,8 @@ export class CanvasCompositorModule extends CanvasModuleBase {
     const ctx = canvas.getContext('2d');
     assert(ctx !== null, 'Canvas 2D context is null');
 
+    ctx.imageSmoothingEnabled = false;
+
     for (const id of this.getCompositeRasterLayerEntityIds()) {
       const adapter = this.manager.adapters.rasterLayers.get(id);
       if (!adapter) {
@@ -288,6 +290,8 @@ export class CanvasCompositorModule extends CanvasModuleBase {
     const ctx = canvas.getContext('2d');
     assert(ctx !== null);
 
+    ctx.imageSmoothingEnabled = false;
+
     for (const id of this.getCompositeInpaintMaskEntityIds()) {
       const adapter = this.manager.adapters.inpaintMasks.get(id);
       if (!adapter) {

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts

@@ -452,7 +452,7 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase {
     if (attrs) {
       clone.setAttrs(attrs);
     }
-    clone.cache();
+    clone.cache({ pixelRatio: 1, imageSmoothingEnabled: false });
     return clone;
   };
 

invokeai/frontend/web/src/features/controlLayers/konva/util.ts

@@ -233,6 +233,7 @@ export function imageDataToDataURL(imageData: ImageData): string {
   if (!ctx) {
     throw new Error('Unable to get canvas context');
   }
+  ctx.imageSmoothingEnabled = false;
   ctx.putImageData(imageData, 0, 0);
 
   // Convert the canvas to a data URL (base64)
@@ -251,6 +252,7 @@ export function imageDataToBlob(imageData: ImageData): Promise<Blob | null> {
     return Promise.resolve(null);
   }
 
+  ctx.imageSmoothingEnabled = false;
   ctx.putImageData(imageData, 0, 0);
 
   return new Promise<Blob | null>((resolve) => {
@@ -281,14 +283,16 @@ export const dataURLToImageData = (dataURL: string, width: number, height: numbe
     canvas.width = width;
     canvas.height = height;
     const ctx = canvas.getContext('2d');
-    const image = new Image();
 
     if (!ctx) {
       canvas.remove();
       reject('Unable to get context');
       return;
     }
 
+    ctx.imageSmoothingEnabled = false;
+
+    const image = new Image();
     image.onload = function () {
       ctx.drawImage(image, 0, 0);
       canvas.remove();
@@ -306,7 +310,7 @@ export const dataURLToImageData = (dataURL: string, width: number, height: numbe
 
 export const konvaNodeToCanvas = (arg: { node: Konva.Node; rect?: Rect; bg?: string }): HTMLCanvasElement => {
   const { node, rect, bg } = arg;
-  const canvas = node.toCanvas({ ...(rect ?? {}) });
+  const canvas = node.toCanvas({ ...(rect ?? {}), imageSmoothingEnabled: false });
 
   if (!bg) {
     return canvas;
@@ -318,6 +322,7 @@ export const konvaNodeToCanvas = (arg: { node: Konva.Node; rect?: Rect; bg?: str
   bgCanvas.height = canvas.height;
   const bgCtx = bgCanvas.getContext('2d');
   assert(bgCtx !== null, 'bgCtx is null');
+  bgCtx.imageSmoothingEnabled = false;
   bgCtx.fillStyle = bg;
   bgCtx.fillRect(0, 0, bgCanvas.width, bgCanvas.height);
   bgCtx.drawImage(canvas, 0, 0);
@@ -344,6 +349,7 @@ export const canvasToBlob = (canvas: HTMLCanvasElement): Promise<Blob> => {
 export const canvasToImageData = (canvas: HTMLCanvasElement): ImageData => {
   const ctx = canvas.getContext('2d');
   assert(ctx, 'ctx is null');
+  ctx.imageSmoothingEnabled = false;
   return ctx.getImageData(0, 0, canvas.width, canvas.height);
 };