Merge pull request mozilla#18749 from calixteman/issue18626

[Editor] Take into account the device pixel ratio when drawing an added image

src/display/display_utils.js

@@ -1124,6 +1124,36 @@ function setLayerDimensions(
   }
 }
 
+/**
+ * Scale factors for the canvas, necessary with HiDPI displays.
+ */
+class OutputScale {
+  constructor() {
+    const pixelRatio = window.devicePixelRatio || 1;
+
+    /**
+     * @type {number} Horizontal scale.
+     */
+    this.sx = pixelRatio;
+
+    /**
+     * @type {number} Vertical scale.
+     */
+    this.sy = pixelRatio;
+  }
+
+  /**
+   * @type {boolean} Returns `true` when scaling is required, `false` otherwise.
+   */
+  get scaled() {
+    return this.sx !== 1 || this.sy !== 1;
+  }
+
+  get symmetric() {
+    return this.sx === this.sy;
+  }
+}
+
 export {
   deprecated,
   DOMCanvasFactory,
@@ -1143,6 +1173,7 @@ export {
   isPdfFile,
   isValidFetchUrl,
   noContextMenu,
+  OutputScale,
   PageViewport,
   PDFDateString,
   PixelsPerInch,

src/display/editor/stamp.js

@@ -14,8 +14,8 @@
  */
 
 import { AnnotationEditorType, shadow } from "../../shared/util.js";
+import { OutputScale, PixelsPerInch } from "../display_utils.js";
 import { AnnotationEditor } from "./editor.js";
-import { PixelsPerInch } from "../display_utils.js";
 import { StampAnnotationElement } from "../annotation_layer.js";
 
 /**
@@ -185,7 +185,7 @@ class StampEditor extends AnnotationEditor {
     }
     const { data, width, height } =
       imageData ||
-      this.copyCanvas(null, /* createImageData = */ true).imageData;
+      this.copyCanvas(null, null, /* createImageData = */ true).imageData;
     const response = await mlManager.guess({
       name: "altText",
       request: {
@@ -453,61 +453,108 @@ class StampEditor extends AnnotationEditor {
     }
   }
 
-  copyCanvas(maxDimension, createImageData = false) {
-    if (!maxDimension) {
+  copyCanvas(maxDataDimension, maxPreviewDimension, createImageData = false) {
+    if (!maxDataDimension) {
       // TODO: get this value from Firefox
       //   (https://bugzilla.mozilla.org/show_bug.cgi?id=1908184)
       // It's the maximum dimension that the AI can handle.
-      maxDimension = 224;
+      maxDataDimension = 224;
     }
 
     const { width: bitmapWidth, height: bitmapHeight } = this.#bitmap;
-    const canvas = document.createElement("canvas");
+    const outputScale = new OutputScale();
 
     let bitmap = this.#bitmap;
     let width = bitmapWidth,
       height = bitmapHeight;
-    if (bitmapWidth > maxDimension || bitmapHeight > maxDimension) {
-      const ratio = Math.min(
-        maxDimension / bitmapWidth,
-        maxDimension / bitmapHeight
-      );
-      width = Math.floor(bitmapWidth * ratio);
-      height = Math.floor(bitmapHeight * ratio);
+    let canvas = null;
+
+    if (maxPreviewDimension) {
+      if (
+        bitmapWidth > maxPreviewDimension ||
+        bitmapHeight > maxPreviewDimension
+      ) {
+        const ratio = Math.min(
+          maxPreviewDimension / bitmapWidth,
+          maxPreviewDimension / bitmapHeight
+        );
+        width = Math.floor(bitmapWidth * ratio);
+        height = Math.floor(bitmapHeight * ratio);
+      }
+
+      canvas = document.createElement("canvas");
+      const scaledWidth = (canvas.width = Math.ceil(width * outputScale.sx));
+      const scaledHeight = (canvas.height = Math.ceil(height * outputScale.sy));
 
       if (!this.#isSvg) {
-        bitmap = this.#scaleBitmap(width, height);
+        bitmap = this.#scaleBitmap(scaledWidth, scaledHeight);
       }
-    }
-
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext("2d");
-    ctx.filter = this._uiManager.hcmFilter;
 
-    // Add a checkerboard pattern as a background in case the image has some
-    // transparency.
-    let white = "white",
-      black = "#cfcfd8";
-    if (this._uiManager.hcmFilter !== "none") {
-      black = "black";
-    } else if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
-      white = "#8f8f9d";
-      black = "#42414d";
-    }
-    const boxDim = 15;
-    const pattern = new OffscreenCanvas(boxDim * 2, boxDim * 2);
-    const patternCtx = pattern.getContext("2d");
-    patternCtx.fillStyle = white;
-    patternCtx.fillRect(0, 0, boxDim * 2, boxDim * 2);
-    patternCtx.fillStyle = black;
-    patternCtx.fillRect(0, 0, boxDim, boxDim);
-    patternCtx.fillRect(boxDim, boxDim, boxDim, boxDim);
-    ctx.fillStyle = ctx.createPattern(pattern, "repeat");
-    ctx.fillRect(0, 0, width, height);
+      const ctx = canvas.getContext("2d");
+      ctx.filter = this._uiManager.hcmFilter;
+
+      // Add a checkerboard pattern as a background in case the image has some
+      // transparency.
+      let white = "white",
+        black = "#cfcfd8";
+      if (this._uiManager.hcmFilter !== "none") {
+        black = "black";
+      } else if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+        white = "#8f8f9d";
+        black = "#42414d";
+      }
+      const boxDim = 15;
+      const boxDimWidth = boxDim * outputScale.sx;
+      const boxDimHeight = boxDim * outputScale.sy;
+      const pattern = new OffscreenCanvas(boxDimWidth * 2, boxDimHeight * 2);
+      const patternCtx = pattern.getContext("2d");
+      patternCtx.fillStyle = white;
+      patternCtx.fillRect(0, 0, boxDimWidth * 2, boxDimHeight * 2);
+      patternCtx.fillStyle = black;
+      patternCtx.fillRect(0, 0, boxDimWidth, boxDimHeight);
+      patternCtx.fillRect(boxDimWidth, boxDimHeight, boxDimWidth, boxDimHeight);
+      ctx.fillStyle = ctx.createPattern(pattern, "repeat");
+      ctx.fillRect(0, 0, scaledWidth, scaledHeight);
+      ctx.drawImage(
+        bitmap,
+        0,
+        0,
+        bitmap.width,
+        bitmap.height,
+        0,
+        0,
+        scaledWidth,
+        scaledHeight
+      );
+    }
 
+    let imageData = null;
     if (createImageData) {
-      const offscreen = new OffscreenCanvas(width, height);
+      let dataWidth, dataHeight;
+      if (
+        outputScale.symmetric &&
+        bitmap.width < maxDataDimension &&
+        bitmap.height < maxDataDimension
+      ) {
+        dataWidth = bitmap.width;
+        dataHeight = bitmap.height;
+      } else {
+        bitmap = this.#bitmap;
+        if (bitmapWidth > maxDataDimension || bitmapHeight > maxDataDimension) {
+          const ratio = Math.min(
+            maxDataDimension / bitmapWidth,
+            maxDataDimension / bitmapHeight
+          );
+          dataWidth = Math.floor(bitmapWidth * ratio);
+          dataHeight = Math.floor(bitmapHeight * ratio);
+
+          if (!this.#isSvg) {
+            bitmap = this.#scaleBitmap(dataWidth, dataHeight);
+          }
+        }
+      }
+
+      const offscreen = new OffscreenCanvas(dataWidth, dataHeight);
       const offscreenCtx = offscreen.getContext("2d", {
         willReadFrequently: true,
       });
@@ -519,27 +566,17 @@ class StampEditor extends AnnotationEditor {
         bitmap.height,
         0,
         0,
-        width,
-        height
+        dataWidth,
+        dataHeight
       );
-      const data = offscreenCtx.getImageData(0, 0, width, height).data;
-      ctx.drawImage(offscreen, 0, 0);
-
-      return { canvas, imageData: { width, height, data } };
+      imageData = {
+        width: dataWidth,
+        height: dataHeight,
+        data: offscreenCtx.getImageData(0, 0, dataWidth, dataHeight).data,
+      };
     }
 
-    ctx.drawImage(
-      bitmap,
-      0,
-      0,
-      bitmap.width,
-      bitmap.height,
-      0,
-      0,
-      width,
-      height
-    );
-    return { canvas, imageData: null };
+    return { canvas, width, height, imageData };
   }
 
   /**
@@ -619,17 +656,23 @@ class StampEditor extends AnnotationEditor {
   }
 
   #drawBitmap(width, height) {
-    width = Math.ceil(width);
-    height = Math.ceil(height);
+    const outputScale = new OutputScale();
+    const scaledWidth = Math.ceil(width * outputScale.sx);
+    const scaledHeight = Math.ceil(height * outputScale.sy);
+
     const canvas = this.#canvas;
-    if (!canvas || (canvas.width === width && canvas.height === height)) {
+    if (
+      !canvas ||
+      (canvas.width === scaledWidth && canvas.height === scaledHeight)
+    ) {
       return;
     }
-    canvas.width = width;
-    canvas.height = height;
+    canvas.width = scaledWidth;
+    canvas.height = scaledHeight;
+
     const bitmap = this.#isSvg
       ? this.#bitmap
-      : this.#scaleBitmap(width, height);
+      : this.#scaleBitmap(scaledWidth, scaledHeight);
 
     const ctx = canvas.getContext("2d");
     ctx.filter = this._uiManager.hcmFilter;
@@ -641,8 +684,8 @@ class StampEditor extends AnnotationEditor {
       bitmap.height,
       0,
       0,
-      width,
-      height
+      scaledWidth,
+      scaledHeight
     );
   }
 

src/pdf.js

@@ -58,6 +58,7 @@ import {
   isDataScheme,
   isPdfFile,
   noContextMenu,
+  OutputScale,
   PDFDateString,
   PixelsPerInch,
   RenderingCancelledException,
@@ -115,6 +116,7 @@ export {
   noContextMenu,
   normalizeUnicode,
   OPS,
+  OutputScale,
   PasswordResponses,
   PDFDataRangeTransport,
   PDFDateString,

test/unit/pdf_spec.js

@@ -50,6 +50,7 @@ import {
   isDataScheme,
   isPdfFile,
   noContextMenu,
+  OutputScale,
   PDFDateString,
   PixelsPerInch,
   RenderingCancelledException,
@@ -93,6 +94,7 @@ const expectedAPI = Object.freeze({
   noContextMenu,
   normalizeUnicode,
   OPS,
+  OutputScale,
   PasswordResponses,
   PDFDataRangeTransport,
   PDFDateString,

web/new_alt_text_manager.js

@@ -371,14 +371,21 @@ class NewAltTextManager {
     // TODO: get this value from Firefox
     //   (https://bugzilla.mozilla.org/show_bug.cgi?id=1908184)
     const AI_MAX_IMAGE_DIMENSION = 224;
+    const MAX_PREVIEW_DIMENSION = 180;
 
     // The max dimension of the preview in the dialog is 180px, so we keep 224px
     // and rescale it thanks to css.
 
-    let canvas;
+    let canvas, width, height;
     if (mlManager) {
-      ({ canvas, imageData: this.#imageData } = editor.copyCanvas(
+      ({
+        canvas,
+        width,
+        height,
+        imageData: this.#imageData,
+      } = editor.copyCanvas(
         AI_MAX_IMAGE_DIMENSION,
+        MAX_PREVIEW_DIMENSION,
         /* createImageData = */ true
       ));
       if (hasAI) {
@@ -388,13 +395,17 @@ class NewAltTextManager {
         );
       }
     } else {
-      ({ canvas } = editor.copyCanvas(
+      ({ canvas, width, height } = editor.copyCanvas(
         AI_MAX_IMAGE_DIMENSION,
+        MAX_PREVIEW_DIMENSION,
         /* createImageData = */ false
       ));
     }
 
     canvas.setAttribute("role", "presentation");
+    const { style } = canvas;
+    style.width = `${width}px`;
+    style.height = `${height}px`;
     this.#imagePreview.append(canvas);
 
     this.#toggleNotNow();

web/pdf_page_view.js

@@ -26,6 +26,7 @@
 import {
   AbortException,
   AnnotationMode,
+  OutputScale,
   PixelsPerInch,
   RenderingCancelledException,
   setLayerDimensions,
@@ -36,7 +37,6 @@ import {
   calcRound,
   DEFAULT_SCALE,
   floorToDivide,
-  OutputScale,
   RenderingStates,
   TextLayerMode,
 } from "./ui_utils.js";

web/pdf_thumbnail_view.js

@@ -23,8 +23,8 @@
 // eslint-disable-next-line max-len
 /** @typedef {import("./pdf_rendering_queue").PDFRenderingQueue} PDFRenderingQueue */
 
-import { OutputScale, RenderingStates } from "./ui_utils.js";
-import { RenderingCancelledException } from "pdfjs-lib";
+import { OutputScale, RenderingCancelledException } from "pdfjs-lib";
+import { RenderingStates } from "./ui_utils.js";
 
 const DRAW_UPSCALE_FACTOR = 2; // See comment in `PDFThumbnailView.draw` below.
 const MAX_NUM_SCALING_STEPS = 3;