added support for image source as arraybuffer, buffer and blob

Author: coderosh

CHANGELOG.md

@@ -0,0 +1,13 @@
+## 2.0.0
+
+- Add support for `arraybuffer`, `blob` and `buffer` as image source
+- Use `buffer-image-size` package instread of `probe-image-size`
+- Use `centra` package in nodejs to fetch image.
+
+## 1.0.2
+
+- Initial Release
+
+```sh
+npm install @coderosh/image-size
+```

README.md

@@ -1,6 +1,6 @@
 # image-size
 
-> Get height and width of image using [Image](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) api in browser and [prob-image-size](https://npmjs.com/package/probe-image-size) package in nodejs.
+> Get height and width of image using [Image](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) api in browser and [buffer-image-size](https://npmjs.com/package/buffer-image-size) package in nodejs.
 
 <a href="https://npmjs.com/package/@coderosh/image-size"><img alt="NPM" src="https://img.shields.io/npm/v/@coderosh/image-size" /></a>
 <a href="https://github.com/coderosh/image-size"><img alt="MIT" src="https://img.shields.io/badge/license-MIT-blue.svg" /></a>
@@ -19,17 +19,60 @@ yarn add @coderosh/image-size
 
 ## Usage
 
-```js
-import imageSize from '@coderosh/image-size'
+- Image source as url (nodejs and browser)
 
-async function main() {
-  const size = await imageSize('https://ulka.js.org/logo.png')
+  ```js
+  import imageSize from '@coderosh/image-size'
 
-  console.log(size) // { height: 827, width: 738 }
-}
+  const main = async () => {
+    const url = 'https://ulka.js.org/logo.png'
 
-main()
-```
+    const size = await imageSize(url)
+    console.log(size) // { height: 827, width: 738 }
+  }
+  ```
+
+- Image source as arraybuffer (nodejs and browser)
+
+  ```js
+  import imageSize from '@coderosh/image-size'
+
+  const main = async () => {
+    const url = 'https://ulka.js.org/logo.png'
+    const ab = await fetch(url).then((res) => res.arrayBuffer())
+
+    const size = await imageSize(ab)
+    console.log(size) // { height: 827, width: 738 }
+  }
+  ```
+
+- Image source as buffer (nodejs only)
+
+  ```js
+  import imageSize from '@coderosh/image-size'
+
+  const main = async () => {
+    const url = 'https://ulka.js.org/logo.png'
+    const buffer = await fetch(url).then((res) => res.buffer())
+
+    const size = await imageSize(buffer)
+    console.log(size) // { height: 827, width: 738 }
+  }
+  ```
+
+- Image source as blob (browser only)
+
+  ```js
+  import imageSize from '@coderosh/image-size'
+
+  const main = async () => {
+    const url = 'https://ulka.js.org/logo.png'
+    const blob = await fetch(url).then((res) => res.blob())
+
+    const size = await imageSize(blob)
+    console.log(size) // { height: 827, width: 738 }
+  }
+  ```
 
 ## License
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coderosh/image-size",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "Get height and width of image in node and browser",
   "main": "dist/index.js",
   "browser": "dist/browser.js",
@@ -16,18 +16,18 @@
     "test": "jest",
     "clean": "rimraf dist",
     "cb": "yarn clean && yarn build",
-    "prepublishOnly": "yarn lint && yarn test && yarn build"
+    "prepublishOnly": "yarn lint && yarn test && yarn cb"
   },
   "engines": {
     "node": ">=12"
   },
   "devDependencies": {
+    "@types/centra": "^2.2.0",
     "@types/jest": "^26.0.23",
     "@types/node": "^15.12.4",
-    "@types/node-fetch": "^2.5.10",
-    "@types/probe-image-size": "^7.0.1",
     "@typescript-eslint/eslint-plugin": "^4.27.0",
     "@typescript-eslint/parser": "^4.27.0",
+    "axios": "^0.24.0",
     "canvas": "^2.8.0",
     "eslint": "^7.29.0",
     "eslint-config-prettier": "^8.3.0",
@@ -74,6 +74,7 @@
     "url": "git+https://github.com/coderosh/image-size.git"
   },
   "dependencies": {
-    "probe-image-size": "^7.2.1"
+    "buffer-image-size": "^0.6.4",
+    "centra": "^2.5.0"
   }
 }

src/browser.ts

@@ -1,15 +1,29 @@
-const imageSize = async (imgUrl: string) => {
+const imageSize = async (src: string | ArrayBuffer | Blob) => {
   return new Promise<{ height: number; width: number }>((resolve, reject) => {
     const image = new Image()
+    let source: string
+
+    if (typeof src === 'string') {
+      source = src
+    } else if (src instanceof ArrayBuffer) {
+      source = URL.createObjectURL(new Blob([new Uint8Array(src)]))
+    } else if (src instanceof Blob) {
+      source = URL.createObjectURL(src)
+    } else {
+      throw new Error(`Invalid argument provided`)
+    }
 
     image.onload = () => {
       const { height, width } = image
+
+      if (source.startsWith('blob:')) URL.revokeObjectURL(source)
+
       resolve({ height, width })
     }
 
     image.onerror = (err) => reject(err)
 
-    image.src = imgUrl
+    image.src = source
   })
 }
 

src/index.ts

@@ -1,7 +1,22 @@
-import probe from 'probe-image-size'
+import sizeOf from 'buffer-image-size'
+import centra from 'centra'
 
-const imageSize = async (imgUrl: string) => {
-  const { height, width } = await probe(imgUrl)
+const imageSize = async (src: string | ArrayBuffer | Buffer) => {
+  let buffer: Buffer
+
+  if (typeof src === 'string') {
+    buffer = await centra(src)
+      .send()
+      .then((res) => res.body)
+  } else if (src instanceof ArrayBuffer) {
+    buffer = Buffer.from(src)
+  } else if (src instanceof Buffer) {
+    buffer = src
+  } else {
+    throw new Error(`Invalid argument provided`)
+  }
+
+  const { height, width } = sizeOf(buffer)
 
   return { height, width }
 }

tests/browser.test.ts

@@ -1,7 +1,32 @@
 import imageSize from '../src/browser'
+import axios from 'axios'
 
-it('imageSize:browser should return width and height', async () => {
-  const size = await imageSize('https://ulka.js.org/logo.png')
+const imgUrl = 'https://ulka.js.org/logo.png'
 
-  expect(size).toEqual({ height: 827, width: 738 })
+describe('imageSize:browser', () => {
+  beforeAll(() => {
+    window.URL.createObjectURL = () => imgUrl
+  })
+
+  it('should return width and height if src is url', async () => {
+    const size = await imageSize(imgUrl)
+
+    expect(size).toEqual({ height: 827, width: 738 })
+  })
+
+  it('should return height and width if src is arraybuffer', async () => {
+    const res = await axios.get(imgUrl, { responseType: 'arraybuffer' })
+
+    const size = await imageSize(res.data)
+
+    expect(size).toEqual({ height: 827, width: 738 })
+  })
+
+  it('should return height and width if src is Blob', async () => {
+    const res = await axios.get(imgUrl, { responseType: 'blob' })
+
+    const size = await imageSize(res.data)
+
+    expect(size).toEqual({ height: 827, width: 738 })
+  })
 })

tests/index.test.ts

@@ -1,6 +1,27 @@
+import axios from 'axios'
 import imageSize from '../src/'
+import centra from 'centra'
 
-test('imageSize:node should return width and height', async () => {
-  const size = await imageSize('https://ulka.js.org/logo.png')
-  expect(size).toEqual({ height: 827, width: 738 })
+const imgUrl = 'https://ulka.js.org/logo.png'
+
+describe('imageSize:node', () => {
+  it('should return width and height if src is string', async () => {
+    const size = await imageSize('https://ulka.js.org/logo.png')
+    expect(size).toEqual({ height: 827, width: 738 })
+  })
+
+  it('should return height and width if src is arraybuffer', async () => {
+    const res = await axios.get(imgUrl, { responseType: 'arraybuffer' })
+    const size = await imageSize(res.data)
+    expect(size).toEqual({ height: 827, width: 738 })
+  })
+
+  it('should return height and width if src is buffer', async () => {
+    const buffer = await centra(imgUrl)
+      .send()
+      .then((res) => res.body)
+
+    const size = await imageSize(buffer)
+    expect(size).toEqual({ height: 827, width: 738 })
+  })
 })