Natural Polyglot Machine

    view-image-size
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    view-image-size

    NPM version

    An in-browser module to get dimensions (i.e. width, height, type) of an image file (by using a DataView).

    common.js & es6 module supported node v12.7.0 (vscode) is required

    Installation

    npm install view-image-size --save

    Supported formats

    • BMP
    • CUR
    • DDS
    • GIF
    • ICNS
    • ICO
    • JPEG
    • KTX
    • PNG
    • PNM (PAM, PBM, PFM, PGM, PPM)
    • PSD
    • SVG
    • TIFF
    • WebP

    API

    Types

    export interface ISize {
      width: number; 
      height: number;
    }
    
    export interface ISizeCalculationResult {
      width: number;
      height: number;
      type: string;
      images?: ISize[];
    };
    
    // js callback
    export type ToAsciiCallback = {
      (view: DataView, begin: number, end: number): string;
    };

    retrieve size from a DataView

    export function imageSize(
      view: DataView,
      toAscii: ToAsciiCallback
    ): ISizeCalculationResult;

    retrieve size of TIFF image (in a DataView) instead of loading the entire image into memory

    // 1) detect the image type
    export function detectImageType(
      view: DataView,
      toAscii: ToAsciiCallback,
    ): string | undefined;
    
    // 2) Test if the TIFF is Big Endian or Little Endian
    export default function isTiffBigEndian(
      view: DataView,
      toAscii: ToAsciiCallback,
      offset: number,
    ): boolean;
    
    // 3) Retrieve size by stepping thru each IFD directory at a time
    export default function viewTiffImage(
      isBigEndian: boolean,
      adjust: (position: number, minimumSize: number) => DataView
    ): ISizeCalculationResult

    Examples

    Node

    Example 1 (js / commonjs)

    import { imageSize } from 'view-image-size/es6';
    
    function toAscii(view, begin, end) {
      return Buffer.from(view.buffer).toString('ascii', begin, end);
    }
    
    // load image into ArrayBuffer
    const view = new DataView( /** ... ***/ );
    const result = imageSize(view, toAscii);
    
    // { height: 100, width: 100, type: 'jpg' }
    console.log(result);

    Example 2 (typescript / es6)

    import { imageSize } from 'view-image-size/es6';
    
    export default function toAscii(view: DataView, begin: number, end: number): string {
      return Buffer.from(view.buffer).toString('ascii', begin, end);
    }
    
    // load image into ArrayBuffer
    const view = new DataView( ... );
    const result = imageSize(view, toAscii);
    
    // { height: 100, width: 100, type: 'jpg' }
    console.log(result);

    Example 3 - loading a tiff image (typescript / es6)

    import { 
      imageSize, 
      detectImageType,
      isTiffBigEndian
    } from 'view-image-size/es6';
    
    const toAscii = (view: DataView, begin: number, end: number) :string => {
      return Buffer.from(view.buffer).toString('ascii', begin, end);
    }
    
    const adjustView = (position: number, minimumSize: number): DataView => {
      return setupView(testFilePath, 1024, position);
    }
    
    const view = new DataView( ... );
    const imageType = detectImageType(view, toAscii);
    if (imageType === 'tiff') {
      const offset = 0
      const isBigEndian = isTiffBigEndian(view, toAscii ,offset);
    
      // get image size
      const size = viewTiffImage(isBigEndian, adjustView);
    }

    In-browser

    Html

    <div class="output-panel"></div>

    JS Script

    const outputPanel = document.querySelector('.output-panel');
    
    const decoder = new TextDecoder('ascii');
    const toAscii = (view: DataView, begin: number, end: number) => {
      const segment = view.buffer.slice(begin, end);
      return decoder.decode(segment);
    }
    
    function getImageResponse(imgPath) {
      let myRequest = new Request(imgPath);
    
      fetch(myRequest)
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.arrayBuffer();
      })
      .then(arrayBuf => {
        const sizeOfImage = () => {
          const dv = new DataView(arrayBuf);
          return imageSize(dv, toAscii);
        }
    
        const output = sizeOfImage();
        outputPanel.textContent = JSON.stringify(output);
      });
    }

    License

    MIT License

    Credits

    fork of image-size

    Install

    npm i view-image-size

    DownloadsWeekly Downloads

    10

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    137 kB

    Total Files

    80

    Last publish

    Collaborators

    • dyoung2019