{"id":17659760,"url":"https://github.com/raphamorim/webassembly-image-editor","last_synced_at":"2025-09-05T08:11:11.304Z","repository":{"id":62218671,"uuid":"515210708","full_name":"raphamorim/webassembly-image-editor","owner":"raphamorim","description":"Image Editor powered by WebAssembly and Rust","archived":false,"fork":false,"pushed_at":"2024-03-28T11:40:37.000Z","size":28394,"stargazers_count":15,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-07T15:03:07.978Z","etag":null,"topics":["image-processing","javascript","rust","rust-lang","wasm","webassembly","webassembly-demo"],"latest_commit_sha":null,"homepage":"http://raphamorim.io/webassembly-image-editor/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raphamorim.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":"2022-07-18T14:07:52.000Z","updated_at":"2025-04-26T01:34:07.000Z","dependencies_parsed_at":"2024-03-28T12:48:20.573Z","dependency_job_id":"0cea822d-29ed-4ce9-96b4-f8e5b2cea4e0","html_url":"https://github.com/raphamorim/webassembly-image-editor","commit_stats":null,"previous_names":["raphamorim/webassembly-image-editor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fwebassembly-image-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fwebassembly-image-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fwebassembly-image-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fwebassembly-image-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raphamorim","download_url":"https://codeload.github.com/raphamorim/webassembly-image-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252902613,"owners_count":21822260,"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":["image-processing","javascript","rust","rust-lang","wasm","webassembly","webassembly-demo"],"created_at":"2024-10-23T16:08:12.966Z","updated_at":"2025-05-07T15:03:25.762Z","avatar_url":"https://github.com/raphamorim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wasm-image-editor\n\nImage Editor powered by WebAssembly and Rust.\n\n| JavaScript | WebAssembly |\n| --- | --- |\n| ![Js demo](resources/javascript-demo.png) | ![Wasm demo](resources/wasm-demo.png) |\n\n## Try it\n\nhttps://raphamorim.io/webassembly-image-editor/\n\n| Filter | WASM (best) | WASM (average) | JavaScript (best) |JavaScript (average) |\n| --- | --- | --- | --- | --- |\n| [Grayscale](#grayscale) | ~7ms | ~10ms | ~10ms | ~14ms |\n| Sepia | WIP | WIP | WIP | WIP |\n\nFilter suggestion? Open an issue :)\n\n## Grayscale\n\n#### The Weighted Method:\n\n```\nGrayscale = 0.299R + 0.587G + 0.114B\n```\n\nExample (rust with casting between f32 and u8):\n\n```rust\nlet grayscale = ((pixels[i] as f32 * 0.3) + (pixels[i+1] as f32 * 0.59) + (pixels[i+2] as f32 * 0.11)) as u8;\n```\n\n#### Average Method:\n\n```\nGrayscale = (R + G + B ) / 3\n```\n\nTheoretically, the formula is 100% correct. But when writing code, you may encounter uint8 overflow error. The sum of R, G, and B is greater than 255. To avoid the exception, R, G, and B should be calculated, respectively.\n\n\n```\nGrayscale = R / 3 + G / 3 + B / 3\n```\n\n#### Rust:\n\n```rust\nlet pixels = unsafe { from_raw_parts_mut(data as *mut u8, len) };\nlet mut i = 0;\nloop {\n    if i \u003e= len - 1 {\n        break;\n    }\n\n    let grayscale = (pixels[i] / 3) + (pixels[i + 1] / 3) + (pixels[i + 2] / 3);\n    pixels[i] = grayscale;\n    pixels[i + 1] = grayscale;\n    pixels[i + 2] = grayscale;\n    i += 4;\n}\n```\n\n#### Javascript:\n\n```javascript\nconst imageData = context.getImageData(0, 0, canvas.width, canvas.height);\nconst pixels  = imageData.data;\nfor (var i = 0, n = pixels.length; i \u003c n; i += 4) {\n    const grayscale = pixels[i] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;\n    pixels[i] = grayscale;\n    pixels[i+1] = grayscale;\n    pixels[i+2] = grayscale;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Fwebassembly-image-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraphamorim%2Fwebassembly-image-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Fwebassembly-image-editor/lists"}