Merge pull request #18516 from calixteman/add_bg_for_alpha

[Editor] Add a checkerboard behind the image preview in the new alt-text dialog in order to see its potential transparency

src/display/editor/stamp.js

@@ -384,12 +384,31 @@ class StampEditor extends AnnotationEditor {
 
     canvas.width = width;
     canvas.height = height;
-    const ctx = canvas.getContext("2d", {
-      willReadFrequently: true,
-    });
+    const ctx = canvas.getContext("2d");
     ctx.filter = this._uiManager.hcmFilter;
 
-    if (createImageData && this._uiManager.hcmFilter !== "none") {
+    // 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);
+
+    if (createImageData) {
       const offscreen = new OffscreenCanvas(width, height);
       const offscreenCtx = offscreen.getContext("2d", {
         willReadFrequently: true,
@@ -422,15 +441,7 @@ class StampEditor extends AnnotationEditor {
       width,
       height
     );
-    let imageData = null;
-    if (createImageData) {
-      imageData = {
-        width,
-        height,
-        data: ctx.getImageData(0, 0, width, height).data,
-      };
-    }
-    return { canvas, imageData };
+    return { canvas, imageData: null };
   }
 
   /**