{"id":18455499,"url":"https://github.com/danielhaim1/img-manipulator","last_synced_at":"2025-04-22T17:11:04.291Z","repository":{"id":100607054,"uuid":"54727527","full_name":"danielhaim1/img-manipulator","owner":"danielhaim1","description":"converts images to base64 and replaces a selected RGB with a newly desired RGBA color.","archived":false,"fork":false,"pushed_at":"2018-03-04T04:07:51.000Z","size":77,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-16T14:56:47.813Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danielhaim1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2016-03-25T15:24:29.000Z","updated_at":"2019-12-11T05:38:08.000Z","dependencies_parsed_at":"2023-03-06T21:45:41.318Z","dependency_job_id":null,"html_url":"https://github.com/danielhaim1/img-manipulator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2Fimg-manipulator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2Fimg-manipulator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2Fimg-manipulator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2Fimg-manipulator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielhaim1","download_url":"https://codeload.github.com/danielhaim1/img-manipulator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250285717,"owners_count":21405297,"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":"2024-11-06T08:08:16.849Z","updated_at":"2025-04-22T17:11:04.272Z","avatar_url":"https://github.com/danielhaim1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Image Manipulator\n\n![Demo](https://i.imgur.com/UOBZ2rx.png)\n\nOriginally inspired by [The Gentlewoman](http://thegentlewoman.co.uk/library/adele) and created to help with automation of image editing process, this tool focuses on a spectrum of RGB and replaces it with a newly desired RGBA.\n\nThe first function converts a `.png/.jpg` to [base64](http://kangax.github.io/jstests/toDataUrl_mime_type_test/), and the second function uses `getImageData` and `putImageData` to adjust the RGB to RGBA.\n\nThe reason this tool is helpful is because `mix-blend-mode` and `background-filter` suck if your image sucks.\n\n- [Live Demo 1](https://codepen.io/danielhaim1/pen/oxwbBR)\n- [Live Demo 2](https://codepen.io/danielhaim1/pen/BKZjwQ?editors=1010)\n\n### Usage\n```js\n// ! define new RGBA\nnewcolor = {\n    r: 255,\n    g: 255,\n    b: 255,\n    a: 0 // 0-255\n};\n\n// ! ISO anything \u003c 190,190,190\nif (r \u003e= 199 \u0026\u0026 g \u003e= 199 \u0026\u0026 b \u003e= 199) {\n    pix[i] = newcolor.r;\n    pix[i + 1] = newcolor.g;\n    pix[i + 2] = newcolor.b;\n    pix[i + 3] = newcolor.a;\n}\n```\n\n### Tests\n\nThere are 3 recipes available in `test/` dir. Everything's vanilla, I'm just sharing the love.\n\n### Note\n\nIf you receive `Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access.` that's because Canvas requires a web server.\n\n### Resources\n\n- [Pixel manipulation with canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas)\n- [Further info on pixel manipulation with canvas](http://beej.us/blog/data/html5s-canvas-2-pixel/)\n\n\n#### Issues?\nTweet me [@danielhaim](https://twitter.com/danielhaim)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielhaim1%2Fimg-manipulator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielhaim1%2Fimg-manipulator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielhaim1%2Fimg-manipulator/lists"}