{"id":16125566,"url":"https://github.com/semibran/pixels","last_synced_at":"2025-10-11T18:08:27.459Z","repository":{"id":130492139,"uuid":"79845937","full_name":"semibran/pixels","owner":"semibran","description":"simple pixel manipulation lib","archived":false,"fork":false,"pushed_at":"2017-02-11T20:04:30.000Z","size":6,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-11T18:08:27.120Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/semibran.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2017-01-23T20:42:33.000Z","updated_at":"2017-01-24T22:19:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"f6236810-d574-4a97-aff6-58702e886624","html_url":"https://github.com/semibran/pixels","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/semibran/pixels","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fpixels","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fpixels/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fpixels/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fpixels/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/semibran","download_url":"https://codeload.github.com/semibran/pixels/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fpixels/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279008296,"owners_count":26084428,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-10-09T21:30:00.748Z","updated_at":"2025-10-11T18:08:27.444Z","avatar_url":"https://github.com/semibran.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pixels\n\u003e Simple browser-based pixel manipulation\n\n```javascript\nvar imageData = context.getImageData(0, 0, width, height)\n\nvar pixels = Pixels(imageData)\npixels.replace('magenta', 'transparent')\nimageData = pixels.compile()\n\ncontext.putImageData(imageData, 0, 0)\n```\n\n# Documentation\n\n## Factory\n```javascript\n// Create from `ImageData` to retain pixel information...\nvar pixels = Pixels(imageData)\n\n// ...or from dimensions to create a blank slate.\nvar pixels = Pixels(width, height)\n```\nCreates and returns a new `Pixels` object from the specified `ImageData` object. Alternatively, you can create a new `Pixels` instance from a desired `width` and `height`.\n\n## Methods\n\n### `get`\n```javascript\nvar color = pixels.get(x, y) // -\u003e pixels\n```\nGets the pixel color at `(x, y)` in the format `'rgba(red, green, blue, alpha)'`.\n\n### `set`\n```javascript\npixels.set(color)(x, y) // -\u003e pixels.set\n```\nSets the pixel color at `(x, y)` to `color`. Usage is identical to [`Grid.set`](https://github.com/semibran/grid#set), except with colors instead of integers.\n\n`color` can be any valid HTML color, including the following:\n- **Color names**: `'blue'`, `'dimgray'`, `'transparent'`...\n- **Hex colors**: `'#dc143c'`, `'#DAB'`...\n- **RGB and RGBA values**: `'rgb(204, 51, 51)'`, `'rgba(64, 120, 193, 0.5)'`.\n\n### `each`\n```javascript\npixels.each(callback) // -\u003e pixels\n```\nExecutes `callback` on each pixel in the pixel data.\n\n```javascript\npixels.each((color, x, y) =\u003e x \u003c pixels.width \u0026\u0026 pixels.set('gray')(x, y))\n```\n\n### `replace`\n```javascript\npixels.replace(oldColor, newColor) // -\u003e pixels\n```\n\nReplaces all appearances of `oldColor` in the pixel data with `newColor`.\n\nThis operation turns out to be really speedy since the colors are indexed in [`pixels.colors`](https://github.com/semibran/pixels#colors) instead of interspersed throughout the `ImageData` object.\n\n### `compile`\n```javascript\nvar imageData = pixels.compile() // -\u003e ImageData\n```\nAlters [`pixels.data`](https://github.com/semibran/pixels#data) based on the changes made to [`pixels.grid`](https://github.com/semibran/pixels#grid) since instantiation. This is what actually converts indices back into pixel colors for you.\n\nAfter receiving the `ImageData` object, paste it back on the context it came from to view the changes.\n```javascript\ncontext.putImageData(imageData, 0, 0) // Magic!\n```\n\n## Properties\n\n### `width`\nThe width of the current image.\n\n### `height`\nThe height of the current image.\n\n### `colors`\nAn `Array` of the known and indexed colors for the current image.\n\n### `grid`\nA [`Grid`](https://github.com/semibran/grid) object in which each item in `grid.data` corresponds to a color index.\n\n### `data`\nThe `ImageData` object that was passed into the factory (or created based on `width` and `height`).\n\n# License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsemibran%2Fpixels","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsemibran%2Fpixels","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsemibran%2Fpixels/lists"}