feat: add option to reject when image loading error has occurred.

docs/configuration.md

@@ -20,6 +20,7 @@ These are all of the available configuration options.
 | logging | `true` | Enable logging for debug purposes
 | onclone | `null` | Callback function which is called when the Document has been cloned for rendering, can be used to modify the contents that will be rendered without affecting the original source document.
 | proxy | `null` | Url to the [proxy](/proxy/) which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
+| rejectImageError | `false` | Whether to reject when occurred error on image loading or zero width/height image.
 | removeContainer | `true` | Whether to cleanup the cloned DOM elements html2canvas creates temporarily
 | scale | `window.devicePixelRatio` | The scale to use for rendering. Defaults to the browsers device pixel ratio.
 | useCORS | `false` | Whether to attempt to load images from a server using CORS

src/index.ts

@@ -15,6 +15,7 @@ export type Options = CloneOptions &
         foreignObjectRendering: boolean;
         logging: boolean;
         removeContainer?: boolean;
+        rejectImageError: boolean;
     };
 
 const parseColor = (value: string): Color => color.parse(Parser.create(value).parseComponentValue());
@@ -61,6 +62,7 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
         cache: opts.cache ? opts.cache : CacheStorage.create(instanceName, resourceOptions),
         logging: true,
         removeContainer: true,
+        rejectImageError: false,
         foreignObjectRendering: false,
         scale: defaultView.devicePixelRatio || 1,
         windowWidth: defaultView.innerWidth,
@@ -128,7 +130,8 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
         width: options.width,
         height: options.height,
         windowWidth: options.windowWidth,
-        windowHeight: options.windowHeight
+        windowHeight: options.windowHeight,
+        rejectImageError: options.rejectImageError
     };
 
     let canvas;

src/render/canvas/canvas-renderer.ts

@@ -41,6 +41,7 @@ import {TextShadow} from '../../css/property-descriptors/text-shadow';
 
 export type RenderConfigurations = RenderOptions & {
     backgroundColor: Color | null;
+    rejectImageError: boolean;
 };
 
 export interface RenderOptions {
@@ -272,9 +273,18 @@ export class CanvasRenderer {
         if (container instanceof ImageElementContainer) {
             try {
                 const image = await this.options.cache.match(container.src);
+                if (
+                    this.options.rejectImageError &&
+                    (container.intrinsicHeight === 0 || container.intrinsicWidth === 0)
+                ) {
+                    throw 'Image has zero height or zero width!';
+                }
                 this.renderReplacedElement(container, curves, image);
             } catch (e) {
                 Logger.getInstance(this.options.id).error(`Error loading image ${container.src}`);
+                if (this.options.rejectImageError) {
+                    throw e;
+                }
             }
         }
 
@@ -285,9 +295,18 @@ export class CanvasRenderer {
         if (container instanceof SVGElementContainer) {
             try {
                 const image = await this.options.cache.match(container.svg);
+                if (
+                    this.options.rejectImageError &&
+                    (container.intrinsicHeight === 0 || container.intrinsicWidth === 0)
+                ) {
+                    throw 'Image has zero height or zero width!';
+                }
                 this.renderReplacedElement(container, curves, image);
             } catch (e) {
                 Logger.getInstance(this.options.id).error(`Error loading svg ${container.svg.substring(0, 255)}`);
+                if (this.options.rejectImageError) {
+                    throw e;
+                }
             }
         }
 
@@ -304,7 +323,8 @@ export class CanvasRenderer {
                 height: container.height,
                 cache: this.options.cache,
                 windowWidth: container.width,
-                windowHeight: container.height
+                windowHeight: container.height,
+                rejectImageError: this.options.rejectImageError
             });
 
             const canvas = await iframeRenderer.render(container.tree);