fix(svg): support maxPixels

Author: matmen

src/image.ts

@@ -395,6 +395,11 @@ export interface RenderSVGOptions {
      * Default: `1`
      */
     scale?: number;
+    /**
+     * The most pixels to render, and the most pixels in any embedded image. Default: `268402689` (16383²), `Infinity`
+     * for no limit
+     */
+    maxPixels?: number;
     /**
      * Fonts for `<text>` (TrueType, OpenType): each text gets the face its `font-family`, `font-weight`, `font-style`
      * and `font-stretch` match best among them, by the names, weights and styles in the fonts (like browsers match
@@ -674,13 +679,15 @@ export class Image {
      * @param height The height in pixels
      */
     constructor(width: number, height: number) {
-        width = ~~width;
-        height = ~~height;
+        width = Math.trunc(finite(width, 'width'));
+        height = Math.trunc(finite(height, 'height'));
 
         if (width < 1)
             throw new RangeError('Image has to be at least 1 pixel wide');
         if (height < 1)
             throw new RangeError('Image has to be at least 1 pixel high');
+        if (width > 0x7fffffff) throw new RangeError('Image width is too large');
+        if (height > 0x7fffffff) throw new RangeError('Image height is too large');
 
         this.__width__ = width;
         this.__height__ = height;
@@ -2708,7 +2715,8 @@ export class Image {
     static renderSVG(svg: string | BinaryData, options?: RenderSVGOptions): Promise<Image>;
     static async renderSVG(svg: string | BinaryData, options: RenderSVGOptions = {}): Promise<Image> {
         checkOptions(options, 'renderSVG(svg, { width: 512 })');
-        const { width: givenWidth, height: givenHeight, scale, fonts = [], images: givenImages = {} } = options;
+        const { width: givenWidth, height: givenHeight, scale, maxPixels = MAX_PIXELS, fonts = [], images: givenImages = {} } = options;
+        if (!(Number(maxPixels) > 0)) throw new RangeError(`maxPixels must be a positive number, not ${maxPixels}`);
         const sizes = [givenWidth, givenHeight, scale].filter(value => value !== undefined).length;
         if (sizes > 1) throw new TypeError('renderSVG() takes one of width, height and scale');
         const mode = givenWidth !== undefined ? 'width' : givenHeight !== undefined ? 'height' : 'scale';
@@ -2741,18 +2749,18 @@ export class Image {
                     images.set(href, { width: value.width, height: value.height, pixels: value.bitmap });
                 } else if (ImageType.getType(value) === 'gif') {
                     // (a GIF's first frame)
-                    const decoded = gif.decode(view(value), true);
+                    const decoded = gif.decode(view(value), true, maxPixels);
                     images.set(href, { width: decoded.width, height: decoded.height, pixels: gif.composite(decoded)[0].pixels });
                 } else {
-                    const image = await Image.decode(value);
+                    const image = await Image.decode(value, { maxPixels });
                     images.set(href, { width: image.width, height: image.height, pixels: image.bitmap });
                 }
             } catch {
                 // (images that can't be decoded aren't drawn, like resvg's)
             }
         }
 
-        const {width, height, pixels} = svgRenderer.render(source, mode, size, images, (Array.isArray(fonts) ? fonts : [fonts]).map(font => view(font)));
+        const {width, height, pixels} = svgRenderer.render(source, mode, size, images, (Array.isArray(fonts) ? fonts : [fonts]).map(font => view(font)), maxPixels);
         const image = new Image(width, height);
         image.bitmap.set(pixels);
 

src/render/svg.ts

@@ -22,6 +22,7 @@ import { FontFace, FontStyle, fontFace, layOutText, parseFontFamilies, parseVari
 import { rasterizeGlyph } from './text.ts';
 import { renderPaintGlyph } from './colr.ts';
 import { decodeSync as decodePNG } from '../codecs/png.ts';
+import { MAX_PIXELS, checkPixels } from '../util/limits.ts';
 
 const UNSUPPORTED = new Set(['filter', 'pattern', 'marker', 'foreignObject', 'script', 'style', 'title', 'desc', 'metadata',
     'defs', 'clipPath', 'mask', 'linearGradient', 'radialGradient', 'stop', 'symbol', 'font', 'font-face', 'animate', 'animateTransform', 'animateMotion', 'set']);
@@ -159,7 +160,7 @@ const OFFSETS = Float64Array.from({ length: SAMPLES }, (_, s) => (s + 0.5) / SAM
  * @param {number} size
  * @return {{width: number, height: number, pixels: Uint8Array}}
  */
-export function render(source: string | Uint8Array, mode: 'scale' | 'width' | 'height', size: number, images: Map<string, RasterImage> = new Map(), fonts: Uint8Array[] = []): { width: number, height: number, pixels: Uint8Array } {
+export function render(source: string | Uint8Array, mode: 'scale' | 'width' | 'height', size: number, images: Map<string, RasterImage> = new Map(), fonts: Uint8Array[] = [], maxPixels = MAX_PIXELS): { width: number, height: number, pixels: Uint8Array } {
     if (typeof source !== 'string') source = decodeUTF8(source);
 
     const root = parseXML(source).children.find(node => node.name === 'svg' && node.svg);
@@ -186,6 +187,10 @@ export function render(source: string | Uint8Array, mode: 'scale' | 'width' | 'h
     outWidth = Math.max(1, outWidth);
     outHeight = Math.max(1, outHeight);
 
+    if (!Number.isSafeInteger(outWidth) || !Number.isSafeInteger(outHeight))
+        throw new RangeError(`SVG output dimensions are too large: ${outWidth}x${outHeight}`);
+    checkPixels(outWidth, outHeight, maxPixels);
+
     const canvas = new Layer(outWidth, outHeight);
     // (a transform on the root element (SVG 2) applies before the viewBox mapping)
     doc.renderRoot([outWidth / width, 0, 0, outHeight / height, 0, 0], canvas, 0);

tests/option-checks.js

@@ -55,7 +55,13 @@ const rejects = async (name, fn, Type, pattern) => {
     await rejects('Animation loopCount 1.5', () => new Animation([new Frame(new Image(8, 8))], {loopCount: 1.5}), RangeError, /loop count/);
     await rejects('dominantColor threshold NaN', () => image.dominantColor({threshold: NaN}), RangeError, /threshold/);
     await rejects('renderSVG scale NaN', () => Image.renderSVG('<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"/>', {scale: NaN}), RangeError, /SVG scale/);
+    await rejects('renderSVG maxPixels 0', () => Image.renderSVG('<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"/>', {maxPixels: 0}), RangeError, /maxPixels/);
+    await rejects('renderSVG maxPixels exceeded', () => Image.renderSVG('<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"/>', {maxPixels: 15}), RangeError, /maxPixels/);
+    if ((await Image.renderSVG('<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"/>', {maxPixels: 16})).width !== 4)
+        panic('renderSVG: maxPixels should allow an output that fits');
     await rejects('renderText size -1', () => Image.renderText('x', { font: new Uint8Array(0), size: -1 }), RangeError, /font size/);
+    if (new Image(2.9, 1).width !== 2) panic('Image constructor: fractional dimensions should still be truncated');
+    await rejects('Image width wraps to small positive dimension', () => new Image(2 ** 32 + 2, 1), RangeError, /width is too large/);
     const png = await image.encodePNG();
     for (const maxPixels of [NaN, -1, 0]) {
         await rejects(`Image.decode maxPixels ${maxPixels}`, () => Image.decode(png, {maxPixels}), RangeError, /maxPixels/);