{"id":13527334,"url":"https://github.com/image-js/image-js","last_synced_at":"2025-05-14T03:11:46.962Z","repository":{"id":33579743,"uuid":"37226136","full_name":"image-js/image-js","owner":"image-js","description":"Image processing and manipulation in JavaScript","archived":false,"fork":false,"pushed_at":"2025-04-15T12:46:53.000Z","size":47656,"stargazers_count":742,"open_issues_count":118,"forks_count":69,"subscribers_count":25,"default_branch":"legacy","last_synced_at":"2025-05-06T03:40:34.498Z","etag":null,"topics":["convolution","hacktoberfest","image","image-analysis","image-processing","javascript","nodejs","roi"],"latest_commit_sha":null,"homepage":"https://image-js.github.io/image-js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/image-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-06-10T22:32:45.000Z","updated_at":"2025-05-05T08:27:51.000Z","dependencies_parsed_at":"2024-01-14T05:10:05.335Z","dependency_job_id":"23ec0884-edb9-41fa-9807-fd03298472b1","html_url":"https://github.com/image-js/image-js","commit_stats":{"total_commits":1682,"total_committers":41,"mean_commits":41.02439024390244,"dds":0.6932223543400713,"last_synced_commit":"c237a39b8a279bd95cae6a1285b56489b44fde99"},"previous_names":[],"tags_count":138,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/image-js%2Fimage-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/image-js%2Fimage-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/image-js%2Fimage-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/image-js%2Fimage-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/image-js","download_url":"https://codeload.github.com/image-js/image-js/tar.gz/refs/heads/legacy","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254059520,"owners_count":22007771,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["convolution","hacktoberfest","image","image-analysis","image-processing","javascript","nodejs","roi"],"created_at":"2024-08-01T06:01:45.917Z","updated_at":"2025-05-14T03:11:41.952Z","avatar_url":"https://github.com/image-js.png","language":"JavaScript","funding_links":[],"categories":["TypeScript","JavaScript"],"sub_categories":[],"readme":"# image-js\n\nAdvanced image processing and manipulation in JavaScript.\n\nimage-js is a full-featured library that can deal with simple image processing\n(color leveling, grey image, mask, resize, rotation, etc.) as well as advanced\nprocessing on scientific images (Region of interest (ROI), Hull curve, minimal\nboundary rectangle (MBR), particle size and orientation, cell imaging, etc.).\n\n\u003ch3 align=\"center\"\u003e\n\n  \u003ca href=\"https://www.zakodium.com\"\u003e\n    \u003cimg src=\"https://www.zakodium.com/brand/zakodium-logo-white.svg\" width=\"50\" alt=\"Zakodium logo\" /\u003e\n  \u003c/a\u003e\n\n  \u003cp\u003e\n    Maintained by \u003ca href=\"https://www.zakodium.com\"\u003eZakodium\u003c/a\u003e\n  \u003c/p\u003e\n\n[![NPM version][npm-image]][npm-url]\n[![build status][ci-image]][ci-url]\n[![Test coverage][codecov-image]][codecov-url]\n[![npm download][download-image]][download-url]\n\n\u003c/h3\u003e\n\n## [API Documentation](https://image-js.github.io/image-js/)\n\n## Installation\n\n`$ npm install image-js`\n\n## Features\n\n### Supported image formats\n\nThe following formats can be loaded by image-js:\n\n- PNG (8 or 16 bits, color or greyscale, with or without alpha, palette 1 - 8 bits)\n- JPEG\n- TIFF (8 or 16 bits, color or greyscale, supports LZW compression)\n\nThe following formats can be saved by image-js:\n\n- PNG (8 or 16 bits)\n- JPEG\n- BMP (black and white)\n\n### Native support for various bit depths and image kinds\n\nimage-js was developed to be used in scientific applications where we often\nhave to work on images that have more that 8 bits per channel.  \nUnlike many other libraries, if a 16-bit greyscale PNG is decoded, the resulting\nimage has only one 16-bit channel and no pixel information is lost.\n\nimage-js can work with images that have 1 (binary), 8, 16 or 32 bits per channel.  \nIt can accept an arbitrary amount of color channels (usually 1 or 3) and can\nhandle an additional alpha component.\n\n### Basic image manipulation\n\nimage-js can be used to do simple image manipulations such as:\n\n- Resize\n- Crop\n- Rotate\n- Convert to greyscale\n- Invert colors\n- Gaussian blur\n- Extract individual channels (red, green or blue)\n- And more...\n\n### Statistics\n\nimage-js implements a number of functions to get statistics about an image:\n\n- Histogram\n- Max, min, median value\n- And more ...\n\n### Advanced features for computer vision\n\n- Image thresholding (otsu, triangle, ...)\n- Regions of interest\n- Convolution with custom kernel\n- Sobel filter\n- Morphological transformations (open, close, erode, ...)\n\n## An example using npm and node\n\nInstall the library:\n\n```console\nnpm i image-js\n```\n\nAn example of code manipulating the image 'cat.jpg' (you need to create it).\n\n```js\nconst { Image } = require('image-js');\n\nexecute().catch(console.error);\n\nasync function execute() {\n  let image = await Image.load('cat.jpg');\n  let grey = image\n    .grey() // convert the image to greyscale.\n    .resize({ width: 200 }) // resize the image, forcing a width of 200 pixels. The height is computed automatically to preserve the aspect ratio.\n    .rotate(30); // rotate the image clockwise by 30 degrees.\n  return grey.save('cat.png');\n}\n```\n\n```console\nnode index.js\n```\n\nA greyscale image will be saved in the same folder.\n\n## Examples in the browser\n\n### Load an image and convert it to grey\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"https://www.lactame.com/lib/image-js/0.21.2/image.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \u003cimg\n      id=\"color\"\n      src=\"https://www.lactame.com/github/image-js/image-js/3073b80c7d626196cb669f9d617f491a8338ca66/test/img/taxi/original.jpeg\"\n    /\u003e\n    \u003cimg id=\"result\" /\u003e\n\n    \u003cscript\u003e\n      async function process() {\n        let image = await IJS.Image.load(document.getElementById('color').src);\n\n        let grey = image.grey();\n\n        document.getElementById('result').src = grey.toDataURL();\n      }\n      process();\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cimg src=\"./test/img/taxi/original.jpeg\" width=\"300\" /\u003e\u003cimg src=\"./test/img/taxi/grey.png\" width=\"300\" /\u003e\n\n[Try it](https://www.w3schools.com/code/tryit.asp?filename=FVD6UC9S7RSV)\n\n### Create a mask\n\n\u003cimg src=\"./test/img/taxi/original.jpeg\" width=\"300\" /\u003e\u003cimg src=\"./test/img/taxi/mask.png\" width=\"300\" /\u003e\n\n[Try it](https://www.w3schools.com/code/tryit.asp?filename=FVD6TP7ICRZM)\n\n### Paint a mask\n\n\u003cimg src=\"./test/img/taxi/original.jpeg\" width=\"300\" /\u003e\u003cimg src=\"./test/img/taxi/orange.png\" width=\"300\" /\u003e\n\n[Try it](https://www.w3schools.com/code/tryit.asp?filename=FVD6T1Y63MUH)\n\n### Filter a mask using Region Of Interests (ROIs)\n\nImage-js has a powerful Region of Interests Manager that allows to create ROIs from different sources. The ROIs can then be filtered, manipulated and finally painted to an RGBA image.\n\n\u003cimg src=\"./test/img/taxi/original.jpeg\" width=\"300\" /\u003e\u003cimg src=\"./test/img/taxi/filteredOrange.png\" width=\"300\" /\u003e\n\n[Try it](https://www.w3schools.com/code/tryit.asp?filename=FVD6SE2F4MWE)\n\nWhen extracting a mask from a ROI you have many options (`contour`, `box`, `filled`, `center`, `hull` or `normal`). Here it looks better to use the `filled` ROI.\n\n\u003cimg src=\"./test/img/taxi/original.jpeg\" width=\"300\" /\u003e\u003cimg src=\"./test/img/taxi/filteredFilledOrange.png\" width=\"300\" /\u003e\n\n[Try it](https://www.w3schools.com/code/tryit.asp?filename=FVD6QQISMLZ2)\n\n### Advanced analysis of SEM / TEM images\n\nThis library is able to deal with complex analysis involving images of cell or SEM / TEM. It will deal correctly with 16 bits grey scale images (TIFF or PNG) commonly found in scientific results.\n\nIn this example we will annotate an SEM / TEM image by coloring each particle and show the surface of them.\n\n\u003cimg src=\"./test/img/semtem/semtem.jpg\" width=\"400\" /\u003e\n\u003cimg src=\"./test/img/semtem/result.png\" /\u003e\n\nWe also display a table containing a summary of all the identified particles.\n\n[Try it](https://www.w3schools.com/code/tryit.asp?filename=FVCJLR0VNK33)\n\n## Development\n\nContributions to code or documentation are welcome! Here are a few tips on how to\nsetup a development environment for image-js.\n\n### Canvas\n\nThe `canvas` native addon library is required for all tests to pass. You can\nfollow the instructions to install it on your OS [here](https://github.com/Automattic/node-canvas#installation).\n\n## License\n\n[MIT](./LICENSE)\n\n[npm-image]: https://img.shields.io/npm/v/image-js.svg\n[npm-url]: https://www.npmjs.com/package/image-js\n[ci-image]: https://github.com/image-js/image-js/workflows/Node.js%20CI/badge.svg?branch=legacy\n[ci-url]: https://github.com/image-js/image-js/actions?query=workflow%3A%22Node.js+CI%22\n[codecov-image]: https://img.shields.io/codecov/c/github/image-js/image-js.svg\n[codecov-url]: https://codecov.io/gh/image-js/image-js\n[download-image]: https://img.shields.io/npm/dm/image-js.svg\n[download-url]: https://www.npmjs.com/package/image-js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimage-js%2Fimage-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimage-js%2Fimage-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimage-js%2Fimage-js/lists"}