image-js 1.1.0 → 1.2.0

package/dist/image-js.umd.js

@@ -1,5 +1,5 @@
 /*
- * image-js v1.1.0
+ * image-js v1.2.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) {
@@ -28679,7 +28680,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 +28689,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 +28744,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.
@@ -31680,7 +31710,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 +32923,7 @@ ${indent}columns: ${matrix.columns}
 
 	var priorityQueue = {exports: {}};
 
-	(function (module, exports) {
+	(function (module, exports$1) {
 	  (function (f) {
 	    {
 	      module.exports = f();
@@ -32923,7 +32953,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 +32998,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 +33036,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 +33079,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 +33217,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 +33879,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 +34048,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;