Apply transfer filters to any graphic commands

src/display/canvas.js

@@ -38,6 +38,7 @@ import {
   TilingPattern,
 } from "./pattern_helper.js";
 import { convertBlackAndWhiteToRGBA } from "../shared/image_utils.js";
+import { isNodeJS } from "../shared/is_node.js";
 
 // <canvas> contexts store most of the state we need natively.
 // However, PDF needs a bit more state, which we store here.
@@ -837,6 +838,7 @@ function copyCtxState(sourceCtx, destCtx) {
     "miterLimit",
     "globalCompositeOperation",
     "font",
+    "filter",
   ];
   for (const property of properties) {
     if (sourceCtx[property] !== undefined) {
@@ -863,6 +865,7 @@ function resetCtxToDefault(ctx, foregroundColor) {
     ctx.setLineDash([]);
     ctx.lineDashOffset = 0;
   }
+  ctx.filter = "none";
 }
 
 function composeSMaskBackdrop(bytes, r0, g0, b0) {
@@ -1576,9 +1579,12 @@ class CanvasGraphics {
           this.checkSMaskState();
           break;
         case "TR":
-          this.current.transferMaps = this.filterFactory
-            ? this.filterFactory.addFilter(value)
-            : value;
+          if (this.filterFactory) {
+            this.ctx.filter = this.current.transferMaps =
+              this.filterFactory.addFilter(value);
+          } else {
+            this.current.transferMaps = value;
+          }
           break;
       }
     }
@@ -3025,7 +3031,7 @@ class CanvasGraphics {
   }
 
   applyTransferMapsToBitmap(imgData) {
-    if (!this.current.transferMaps) {
+    if (!this.current.transferMaps || this.current.transferMaps === "none") {
       return imgData.bitmap;
     }
     const { bitmap, width, height } = imgData;
@@ -3037,7 +3043,7 @@ class CanvasGraphics {
     const tmpCtx = tmpCanvas.context;
     tmpCtx.filter = this.current.transferMaps;
     tmpCtx.drawImage(bitmap, 0, 0);
-    tmpCtx.filter = "";
+    tmpCtx.filter = "none";
 
     return tmpCanvas.canvas;
   }
@@ -3051,6 +3057,15 @@ class CanvasGraphics {
     const ctx = this.ctx;
 
     this.save();
+
+    if (!isNodeJS) {
+      // The filter, if any, will be applied in applyTransferMapsToBitmap.
+      // It must be applied to the image before rescaling else some artifacts
+      // could appear.
+      // The final restore will reset it to its value.
+      ctx.filter = "none";
+    }
+
     // scale the image to the unit square
     ctx.scale(1 / width, -1 / height);
 
@@ -3106,7 +3121,7 @@ class CanvasGraphics {
     const ctx = this.ctx;
     let imgToPaint;
     if (imgData.bitmap) {
-      imgToPaint = this.applyTransferMapsToBitmap(imgData);
+      imgToPaint = imgData.bitmap;
     } else {
       const w = imgData.width;
       const h = imgData.height;

src/display/display_utils.js

@@ -81,7 +81,7 @@ class FilterFactory {
 
   addFilter(maps) {
     if (!maps) {
-      return "";
+      return "none";
     }
 
     // When a page is zoomed the page is re-drawn but the maps are likely

test/pdfs/issue16114.pdf.link

@@ -0,0 +1,2 @@
+https://github.com/mozilla/pdf.js/files/10896497/spider.pdf
+

test/test_manifest.json

@@ -7421,5 +7421,13 @@
       "type": "eq",
       "annotations": true,
       "rotation": 270
+   },
+   {
+      "id": "issue16114",
+      "file": "pdfs/issue16114.pdf",
+      "md5": "c04827ea33692e0f94a5e51716d9aa2e",
+      "rounds": 1,
+      "link": true,
+      "type": "eq"
    }
 ]