fix: dont use global image cache (#1863)

diegomura · Jun 5, 2022 · eecddbd · eecddbd
1 parent 1411d16
commit eecddbd
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/.changeset/brown-peaches-drum.md b/.changeset/brown-peaches-drum.md
@@ -0,0 +1,5 @@
+---
+'@react-pdf/render': patch
+---
+
+fix: dont use global image cache
diff --git a/packages/render/src/index.js b/packages/render/src/index.js
@@ -4,10 +4,11 @@ import addBookmarks from './operations/addBookmarks';
 
 const render = (ctx, doc) => {
   const pages = doc.children || [];
+  const options = { imageCache: new Map() };
 
   addMetadata(ctx, doc);
 
-  pages.forEach(page => renderNode(ctx, page));
+  pages.forEach(page => renderNode(ctx, page, options));
 
   addBookmarks(ctx, doc);
 

diff --git a/packages/render/src/primitives/renderImage.js b/packages/render/src/primitives/renderImage.js
@@ -3,9 +3,7 @@ import { isNil } from '@react-pdf/fns';
 import clipNode from '../operations/clipNode';
 import resolveObjectFit from '../utils/resolveObjectFit';
 
-const IMAGE_CACHE = new Map();
-
-const drawImage = (ctx, node) => {
+const drawImage = (ctx, node, options = {}) => {
   const { left, top } = node.box;
   const opacity = node.style?.opacity;
   const objectFit = node.style?.objectFit;
@@ -15,6 +13,7 @@ const drawImage = (ctx, node) => {
   const paddingRight = node.box.paddingRight || 0;
   const paddingBottom = node.box.paddingBottom || 0;
   const paddingLeft = node.box.paddingLeft || 0;
+  const imageCache = options.imageCache || new Map();
 
   const { width, height, xOffset, yOffset } = resolveObjectFit(
     objectFit,
@@ -30,10 +29,9 @@ const drawImage = (ctx, node) => {
     if (width !== 0 && height !== 0) {
       const cacheKey = node.image.key;
 
-      const image =
-        IMAGE_CACHE.get(cacheKey) || ctx.embedImage(node.image.data);
+      const image = imageCache.get(cacheKey) || ctx.embedImage(node.image.data);
 
-      if (cacheKey) IMAGE_CACHE.set(cacheKey, image);
+      if (cacheKey) imageCache.set(cacheKey, image);
 
       const imageOpacity = isNil(opacity) ? 1 : opacity;
 
@@ -58,11 +56,11 @@ const drawImage = (ctx, node) => {
   }
 };
 
-const renderImage = (ctx, node) => {
+const renderImage = (ctx, node, options) => {
   ctx.save();
 
   clipNode(ctx, node);
-  drawImage(ctx, node);
+  drawImage(ctx, node, options);
 
   ctx.restore();
 };

diff --git a/packages/render/src/primitives/renderNode.js b/packages/render/src/primitives/renderNode.js
@@ -15,15 +15,15 @@ import setDestination from '../operations/setDestination';
 
 const isRecursiveNode = node => node.type !== P.Text && node.type !== P.Svg;
 
-const renderChildren = (ctx, node) => {
+const renderChildren = (ctx, node, options) => {
   ctx.save();
 
   if (node.box) {
     ctx.translate(node.box.left, node.box.top);
   }
 
   const children = node.children || [];
-  const renderChild = child => renderNode(ctx, child);
+  const renderChild = child => renderNode(ctx, child, options);
 
   children.forEach(renderChild);
 
@@ -39,7 +39,7 @@ const renderFns = {
   [P.Link]: setLink,
 };
 
-const renderNode = (ctx, node) => {
+const renderNode = (ctx, node, options) => {
   const overflowHidden = node.style?.overflow === 'hidden';
   const shouldRenderChildren = isRecursiveNode(node);
 
@@ -55,9 +55,9 @@ const renderNode = (ctx, node) => {
 
   const renderFn = renderFns[node.type];
 
-  if (renderFn) renderFn(ctx, node);
+  if (renderFn) renderFn(ctx, node, options);
 
-  if (shouldRenderChildren) renderChildren(ctx, node);
+  if (shouldRenderChildren) renderChildren(ctx, node, options);
 
   setDestination(ctx, node);
   renderDebug(ctx, node);