image-js 1.1.0 → 1.3.0

package/dist/image-js.umd.js

@@ -1,5 +1,5 @@
 /*
- * image-js v1.1.0
+ * image-js v1.3.0
  * Image processing and manipulation in JavaScript
  * https://github.com/image-js/image-js#readme
  *
@@ -11,6 +11,7 @@
 	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.IJS = {}));
 })(this, (function (exports) { 'use strict';
 
+	var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 	function getDefaultExportFromCjs (x) {
 		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 	}
@@ -6269,9 +6270,9 @@ ${indent}columns: ${matrix.columns}
 	var index_umd$1 = {exports: {}};
 
 	var index_umd = index_umd$1.exports;
-	(function (module, exports) {
+	(function (module, exports$1) {
 	  (function (N, J) {
-	    J(exports) ;
+	    J(exports$1) ;
 	  })(index_umd, function (N) {
 
 	    function J(f, a, o, t, e) {
@@ -8668,7 +8669,7 @@ ${indent}columns: ${matrix.columns}
 	 * @param image - The image with which to blend.
 	 * @param column - Column of the target pixel.
 	 * @param row - Row of the target pixel.
-	 * @param color - Color with which to blend the image pixel. @default `'Opaque black'`.
+	 * @param color - Color with which to blend the image pixel. Default: `Opaque black`.
 	 */
 	function setBlendedPixel(image, column, row, color) {
 	  color = color ?? getDefaultColor(image);
@@ -8698,7 +8699,7 @@ ${indent}columns: ${matrix.columns}
 	 * @param image - The image with which to blend.
 	 * @param column - Column of the target pixel.
 	 * @param row - Row of the target pixel.
-	 * @param color - Color with which to blend the image pixel. @default `'Opaque black'`.
+	 * @param color - Color with which to blend the image pixel. Default: `Opaque black`.
 	 */
 	function setBlendedVisiblePixel(image, column, row, color) {
 	  if (column >= 0 && column < image.width && row >= 0 && row < image.height) {
@@ -16817,6 +16818,10 @@ ${indent}columns: ${matrix.columns}
 	   * Origin of the image relative to a the parent image.
 	   */
 	  origin;
+	  /**
+	   * Original image resolution.
+	   */
+	  originalResolution;
 	  meta;
 	  /**
 	   * Typed array holding the image data.
@@ -16837,7 +16842,8 @@ ${indent}columns: ${matrix.columns}
 	        row: 0,
 	        column: 0
 	      },
-	      meta
+	      meta,
+	      resolution
 	    } = options;
 	    if (width < 1 || !Number.isInteger(width)) {
 	      throw new RangeError(`width must be an integer and at least 1. Received ${width}`);
@@ -16852,6 +16858,7 @@ ${indent}columns: ${matrix.columns}
 	    this.colorModel = colorModel;
 	    this.origin = origin;
 	    this.meta = meta;
+	    this.originalResolution = resolution;
 	    const colorModelDef = colorModels[colorModel];
 	    this.components = colorModelDef.components;
 	    this.alpha = colorModelDef.alpha;
@@ -16872,6 +16879,38 @@ ${indent}columns: ${matrix.columns}
 	      this.data = data;
 	    }
 	  }
+	  /**
+	   * Returns normalized resolution in pixels per centimeter. If resolution unit is unknown, return null.
+	   * @returns Object with x and y resolutions in pixel/cm.
+	   */
+	  get normalizedResolution() {
+	    if (!this.originalResolution) {
+	      return undefined;
+	    }
+	    const centimetersPerInch = 2.54;
+	    const centimetersPerMeter = 100;
+	    switch (this.originalResolution.unit) {
+	      case 'inch':
+	        return {
+	          x: this.originalResolution.x / centimetersPerInch,
+	          y: this.originalResolution.y / centimetersPerInch
+	        };
+	      case 'centimeter':
+	        return {
+	          x: this.originalResolution.x,
+	          y: this.originalResolution.y
+	        };
+	      case 'meter':
+	        return {
+	          x: this.originalResolution.x / centimetersPerMeter,
+	          y: this.originalResolution.y / centimetersPerMeter
+	        };
+	      case 'unknown':
+	        return null;
+	      default:
+	        throw new Error('Unknown resolution unit.');
+	    }
+	  }
 	  /**
 	   * Create a new Image based on the properties of an existing one.
 	   * @param other - Reference image.
@@ -28679,7 +28718,7 @@ ${indent}columns: ${matrix.columns}
 	 * @returns - The `fs`, `path` and `url` Node.js modules.
 	 */
 	function getNodeApiOrThrow(methodName) {
-	  if (typeof process === 'undefined' || typeof process.getBuiltinModule !== 'function') {
+	  if (!isNode()) {
 	    throw new Error(`${methodName} is only implemented for Node.js`);
 	  }
 	  return {
@@ -28688,6 +28727,35 @@ ${indent}columns: ${matrix.columns}
 	    url: process.getBuiltinModule('node:url')
 	  };
 	}
+	let CanvasCtorBrowser;
+	let CanvasCtorNode;
+	/**
+	 * Returns a 2D canvas context for rendering on the browser or Node.js.
+	 * @param width - Width of the canvas.
+	 * @param height - Height of the canvas.
+	 * @returns The initialised canvas context.
+	 */
+	function getCanvasContext(width, height) {
+	  if (isNode()) {
+	    CanvasCtorNode ??= getRequireFn()('skia-canvas').Canvas;
+	    return new CanvasCtorNode(width, height).getContext('2d');
+	  } else {
+	    CanvasCtorBrowser ??= globalThis.OffscreenCanvas;
+	    const context = new CanvasCtorBrowser(width, height).getContext('2d');
+	    if (!context) {
+	      throw new Error('Failed to create canvas context');
+	    }
+	    return context;
+	  }
+	}
+	function isNode() {
+	  return typeof process !== 'undefined' && typeof process.getBuiltinModule === 'function';
+	}
+	let requireFn;
+	function getRequireFn() {
+	  requireFn ??= process.getBuiltinModule('node:module').createRequire((typeof document === 'undefined' && typeof location === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : typeof document === 'undefined' ? location.href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('image-js.umd.js', document.baseURI).href)));
+	  return requireFn;
+	}
 
 	/**
 	 * Asynchronously write an image to the disk.
@@ -28714,7 +28782,7 @@ ${indent}columns: ${matrix.columns}
 	  await nodeApi.fs.promises.writeFile(path, toWrite);
 	}
 	/**
-	 * Synchronous version of @see {@link write}.
+	 * Synchronous version of {@link write}.
 	 * This method is only implemented for Node.js.
 	 * @param path - Path where the image should be written.
 	 * @param image - Image to save.
@@ -31517,10 +31585,23 @@ ${indent}columns: ${matrix.columns}
 	    default:
 	      throw new RangeError(`invalid number of channels: ${png.channels}`);
 	  }
+	  let resolution;
+	  if (png.resolution) {
+	    resolution = png.resolution.unit === 1 ? /*If the resolution unit is meters*/{
+	      x: png.resolution.x,
+	      y: png.resolution.y,
+	      unit: 'meter'
+	    } : /*If resolution unit is unknown */{
+	      x: png.resolution.x,
+	      y: png.resolution.y,
+	      unit: 'unknown'
+	    };
+	  }
 	  return new Image(png.width, png.height, {
 	    colorModel,
 	    bitDepth,
-	    data: png.data
+	    data: png.data,
+	    resolution
 	  });
 	}
 	/**
@@ -31590,6 +31671,7 @@ ${indent}columns: ${matrix.columns}
 	  if (ifd.data instanceof Float32Array || ifd.data instanceof Float64Array) {
 	    throw new Error('Float TIFF data is not supported.');
 	  }
+	  const resolution = getTiffResolution(ifd);
 	  if (ifd.type === 3) {
 	    const hasAlpha = ifd.samplesPerPixel === 2;
 	    const pixelLength = hasAlpha ? 4 : 3;
@@ -31617,7 +31699,8 @@ ${indent}columns: ${matrix.columns}
 	      data,
 	      colorModel: hasAlpha ? 'RGBA' : 'RGB',
 	      bitDepth: 16,
-	      meta: getMetadata(ifd)
+	      meta: getMetadata(ifd),
+	      resolution
 	    });
 	  } else if (ifd.type === 1 || ifd.type === 0) {
 	    if (ifd.bitsPerSample !== 1) {
@@ -31625,14 +31708,16 @@ ${indent}columns: ${matrix.columns}
 	        data: ifd.data,
 	        bitDepth: ifd.bitsPerSample,
 	        colorModel: ifd.alpha ? 'GREYA' : 'GREY',
-	        meta: getMetadata(ifd)
+	        meta: getMetadata(ifd),
+	        resolution
 	      });
 	    } else {
 	      return new Image(ifd.width, ifd.height, {
 	        data: ifd.data.map(pixel => pixel * 255),
 	        bitDepth: 8,
 	        colorModel: 'GREY',
-	        meta: getMetadata(ifd)
+	        meta: getMetadata(ifd),
+	        resolution
 	      });
 	    }
 	  } else {
@@ -31640,10 +31725,41 @@ ${indent}columns: ${matrix.columns}
 	      data: ifd.data,
 	      bitDepth: ifd.bitsPerSample,
 	      colorModel: ifd.alpha ? 'RGBA' : 'RGB',
-	      meta: getMetadata(ifd)
+	      meta: getMetadata(ifd),
+	      resolution
 	    });
 	  }
 	}
+	/**
+	 * Gets image resolution from its metadata and converts it into Pixels per meter, when it's possible. Also keeps original resolution values and units.
+	 * @param ifd - Tiff metadata.
+	 * @returns Resolution object.
+	 */
+	function getTiffResolution(ifd) {
+	  if (!ifd.xResolution || !ifd.yResolution) {
+	    return undefined;
+	  }
+	  switch (ifd.resolutionUnit) {
+	    case 1:
+	      return {
+	        x: ifd.xResolution,
+	        y: ifd.yResolution,
+	        unit: 'unknown'
+	      };
+	    case 3:
+	      return {
+	        x: ifd.xResolution,
+	        y: ifd.yResolution,
+	        unit: 'centimeter'
+	      };
+	    default:
+	      return {
+	        x: ifd.xResolution,
+	        y: ifd.yResolution,
+	        unit: 'inch'
+	      };
+	  }
+	}
 
 	/**
 	 * Decode input data. Data format is automatically detected.
@@ -31680,7 +31796,7 @@ ${indent}columns: ${matrix.columns}
 	  return decode(data);
 	}
 	/**
-	 * Synchronous version of @see {@link read}.
+	 * Synchronous version of {@link read}.
 	 * This method is only implemented for Node.js.
 	 * @param path - The path to the image.
 	 * @returns Image instance.
@@ -32893,7 +33009,7 @@ ${indent}columns: ${matrix.columns}
 
 	var priorityQueue = {exports: {}};
 
-	(function (module, exports) {
+	(function (module, exports$1) {
 	  (function (f) {
 	    {
 	      module.exports = f();
@@ -32923,7 +33039,7 @@ ${indent}columns: ${matrix.columns}
 	      for (var o = 0; o < r.length; o++) s(r[o]);
 	      return s;
 	    }({
-	      1: [function (_dereq_, module, exports) {
+	      1: [function (_dereq_, module, exports$1) {
 	        var AbstractPriorityQueue,
 	          ArrayStrategy,
 	          BHeapStrategy,
@@ -32968,7 +33084,7 @@ ${indent}columns: ${matrix.columns}
 	        "./PriorityQueue/BHeapStrategy": 4,
 	        "./PriorityQueue/BinaryHeapStrategy": 5
 	      }],
-	      2: [function (_dereq_, module, exports) {
+	      2: [function (_dereq_, module, exports$1) {
 	        module.exports = function () {
 	          function AbstractPriorityQueue(options) {
 	            var ref;
@@ -33006,7 +33122,7 @@ ${indent}columns: ${matrix.columns}
 	          return AbstractPriorityQueue;
 	        }();
 	      }, {}],
-	      3: [function (_dereq_, module, exports) {
+	      3: [function (_dereq_, module, exports$1) {
 	        var binarySearchForIndexReversed;
 	        binarySearchForIndexReversed = function (array, value, comparator) {
 	          var high, low, mid;
@@ -33049,7 +33165,7 @@ ${indent}columns: ${matrix.columns}
 	          return ArrayStrategy;
 	        }();
 	      }, {}],
-	      4: [function (_dereq_, module, exports) {
+	      4: [function (_dereq_, module, exports$1) {
 	        module.exports = function () {
 	          function BHeapStrategy(options) {
 	            var arr, j, k, len, ref, ref1, shift, value;
@@ -33187,7 +33303,7 @@ ${indent}columns: ${matrix.columns}
 	          return BHeapStrategy;
 	        }();
 	      }, {}],
-	      5: [function (_dereq_, module, exports) {
+	      5: [function (_dereq_, module, exports$1) {
 	        module.exports = function () {
 	          function BinaryHeapStrategy(options) {
 	            var ref;
@@ -33849,6 +33965,105 @@ ${indent}columns: ${matrix.columns}
 	  BINARY: ['Mask']
 	};
 
+	/**
+	 * Draws text on an image.
+	 * @param image - Image to write text on.
+	 * @param text - Text to write on the image.
+	 * @param options - Out Options
+	 * @returns Image with drawn text.
+	 */
+	function drawText(image, text, options) {
+	  if (Array.isArray(text) && text.length === 0) {
+	    throw new Error('At least one text element must be provided');
+	  }
+	  const newImage = getOutputImage(image, options, {
+	    clone: true
+	  });
+	  const defaultFont = options?.font ?? '12px Helvetica';
+	  const defaultColor = options?.fontColor ?? [255, 255, 255, 255];
+	  const ctx = getCanvasContext(image.width, image.height);
+	  if (!Array.isArray(text)) {
+	    drawTextElement(image, ctx, text, defaultFont, defaultColor);
+	  } else {
+	    for (const label of text) {
+	      drawTextElement(image, ctx, label, defaultFont, defaultColor);
+	    }
+	  }
+	  layerCanvas(newImage.getRawImage().data, ctx.getImageData(0, 0, image.width, image.height).data, image.channels, image.bitDepth);
+	  return newImage;
+	}
+	function drawTextElement(image, ctx, text, defaultFont, defaultColor) {
+	  ctx.font = text.font ?? defaultFont;
+	  const fontColor = text.fontColor ?? defaultColor;
+	  validateValues(fontColor, image);
+	  const alpha = fontColor[3] ? fontColor[3] / 255 : 1;
+	  const normalizedColor = [fontColor[0] ?? 0, fontColor[1] ?? 0, fontColor[2] ?? 0, alpha];
+	  ctx.fillStyle = `rgba(${normalizedColor.join(',')})`;
+	  ctx.fillText(String(text.content), text.position.column, text.position.row);
+	}
+	/**
+	 * Draws labels on the image data from canvas.
+	 * @param imageData - Image data to draw text on.
+	 * @param canvasData - Canvas data to draw on the image.
+	 * @param numberOfChannels - Number of channels of the initial image.
+	 * @param bitDepth - Bit depth of the initial image.
+	 */
+	function layerCanvas(imageData, canvasData, numberOfChannels, bitDepth) {
+	  const config = CHANNEL_CONFIGS[numberOfChannels] || CHANNEL_CONFIGS[1];
+	  const pixelCount = canvasData.length >>> 2;
+	  const bitShift = bitDepth - 8;
+	  let imageIndex = 0;
+	  let canvasIndex = 0;
+	  for (let pixel = 0; pixel < pixelCount; pixel++) {
+	    const canvasAlpha = canvasData[canvasIndex + 3] / 255;
+	    // Skip transparent canvas pixels completely
+	    if (canvasAlpha === 0) {
+	      imageIndex += numberOfChannels;
+	      canvasIndex += 4;
+	      continue;
+	    }
+	    const invAlpha = 1 - canvasAlpha;
+	    for (const channel of config.channelOffsets) {
+	      const targetIndex = imageIndex + channel;
+	      imageData[targetIndex] = Math.round(canvasData[canvasIndex + channel] * canvasAlpha + imageData[targetIndex] * invAlpha) << bitShift;
+	    }
+	    if (config.hasAlpha) {
+	      const alphaIndex = imageIndex + config.alphaOffset;
+	      const imageAlpha = (imageData[alphaIndex] >>> bitShift) / 255;
+	      const newAlpha = canvasAlpha + imageAlpha * (1 - canvasAlpha);
+	      imageData[alphaIndex] = Math.round(newAlpha * 255) << bitShift;
+	    }
+	    imageIndex += numberOfChannels;
+	    canvasIndex += 4;
+	  }
+	}
+	const CHANNEL_CONFIGS = {
+	  // GREY
+	  1: {
+	    channelOffsets: [0],
+	    hasAlpha: false,
+	    alphaOffset: undefined
+	  },
+	  // GREYA
+	  2: {
+	    channelOffsets: [0],
+	    hasAlpha: true,
+	    alphaOffset: 1
+	  },
+	  3: {
+	    // RGB
+	    channelOffsets: [0, 1, 2],
+	    hasAlpha: false,
+	    alphaOffset: undefined
+	  },
+	  4: {
+	    // RGBA
+	    channelOffsets: [0, 1, 2],
+	    hasAlpha: true,
+	    alphaOffset: 3
+	  }
+	};
+
 	exports.BorderType = BorderType;
 	exports.DerivativeFilter = DerivativeFilter;
 	exports.GreyAlgorithm = GreyAlgorithm;
@@ -33919,6 +34134,7 @@ ${indent}columns: ${matrix.columns}
 	exports.drawPolylineOnImage = drawPolylineOnImage;
 	exports.drawPolylineOnMask = drawPolylineOnMask;
 	exports.drawRectangle = drawRectangle;
+	exports.drawText = drawText;
 	exports.encode = encode;
 	exports.encodeDataURL = encodeDataURL;
 	exports.encodeJpeg = encodeJpeg;