{"id":27761070,"url":"https://github.com/tsoding/stb_image_js","last_synced_at":"2025-06-14T18:08:18.684Z","repository":{"id":154187463,"uuid":"631756313","full_name":"tsoding/stb_image_js","owner":"tsoding","description":"stb_image.h wrapper for a Web Browser","archived":false,"fork":false,"pushed_at":"2023-04-24T11:36:28.000Z","size":149,"stargazers_count":40,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-29T12:25:12.834Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tsoding.github.io/stb_image_js","language":"C","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/tsoding.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,"zenodo":null}},"created_at":"2023-04-24T01:41:13.000Z","updated_at":"2024-10-20T17:31:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"7be38e7d-6898-42d5-b74d-aa19f3c27952","html_url":"https://github.com/tsoding/stb_image_js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tsoding/stb_image_js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsoding%2Fstb_image_js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsoding%2Fstb_image_js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsoding%2Fstb_image_js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsoding%2Fstb_image_js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tsoding","download_url":"https://codeload.github.com/tsoding/stb_image_js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsoding%2Fstb_image_js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259860405,"owners_count":22922987,"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":[],"created_at":"2025-04-29T12:24:28.500Z","updated_at":"2025-06-14T18:08:18.654Z","avatar_url":"https://github.com/tsoding.png","language":"C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# stb\\_image\\_js\n\n[stb_image.h](https://github.com/nothings/stb) wrapper for a Web Browser. Or any JavaScript environment that supports [WebAssembly](https://webassembly.org/) and [fetch()](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)\n\nWhat we did is basically compiled [stb_image.h](https://github.com/nothings/stb) to a self-contained WASM module and wrote a simple js wrapper that takes the bytes of image files, feeds them into the WASM module, receives the parsed pixels and constructs [ImageData](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) out of them. So you can download an image and get its ImageData in one go if you ever wanted to do it this way.\n\n## Quick Start\n\n1. Copy [js/stb_image.js](./js/stb_image.js) and [wasm/stb_image.wasm](./wasm/stb_image.wasm) file to your website to `js` and `wasm` folder correpondingly.\n1. Modify `STB_IMAGE_WASM_PATH` in [js/stb_image.js](./js/stb_image.js) if you want a different path to [wasm/stb_image.wasm](./wasm/stb_image.wasm).\n1. `\u003cscript src='./js/stb_image.js'\u003e\u003c/script\u003e`\n1.\n\n```javascript\nconst canvas = document.getElementById(\"canvas-id\");\nconst ctx = canvas.getContext(\"2d\");\nstbi_load_from_url(\"image.png\").then((image) =\u003e ctx.putImageData(image, 0, 0));\n```\n\n*I'll eventually turn this into a proper npm package. Just copy the files for now. It's simple and straightforward. You have everything you need in here. See Demo for more info. The whole codebase is dead simple. You can learn it in less than an hour. I believe in you.*\n\n## Demo\n\nThe demo consists of two files: [index.html](./index.html) and [js/demo.js](./js/demo.js) compiled from [ts/demo.ts](./ts/demo.ts) (that's probably the one you wanna read). It loads up images from [./img/](./img/) folder using [js/stb_image.js](./js/stb_image.js) and puts them into the canvas.\n\nIf you want to run it locally just run something like\n\n```console\n$ python3 -m http.server 6969 # or any other lightweight HTTP server of your choice\n$ browser http://localhost:6969/\n```\n\nYou can also find it deployed at https://tsoding.github.io/stb_image_js/\n\n## Rebuilding `stb_image.wasm`\n\nYou will need clang 13.0.0+:\n\n```console\n$ node build-wasm.js\n```\n\n## Rebuilding the JS files\n\n```console\n$ npm install\n$ ./node_modules/.bin/tsc\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsoding%2Fstb_image_js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsoding%2Fstb_image_js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsoding%2Fstb_image_js/lists"}