{"id":16609551,"url":"https://github.com/peterpeterparker/web-photo-filter","last_synced_at":"2025-10-29T16:32:55.628Z","repository":{"id":47759258,"uuid":"119971303","full_name":"peterpeterparker/web-photo-filter","owner":"peterpeterparker","description":"A Web Component to apply Instagram-like WebGL filters to photos","archived":true,"fork":false,"pushed_at":"2021-08-14T06:56:23.000Z","size":1102,"stargazers_count":118,"open_issues_count":1,"forks_count":22,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-12-18T22:02:03.051Z","etag":null,"topics":["canvas","image-processing","instagram","instagram-filters","photos","stencil","stenciljs","webcomponents","webgl","webgl-filters"],"latest_commit_sha":null,"homepage":"https://webphotofilter.com","language":"HTML","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/peterpeterparker.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}},"created_at":"2018-02-02T11:01:24.000Z","updated_at":"2024-09-29T01:26:31.000Z","dependencies_parsed_at":"2022-08-23T11:10:44.083Z","dependency_job_id":null,"html_url":"https://github.com/peterpeterparker/web-photo-filter","commit_stats":null,"previous_names":["fluster/web-photo-filter"],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterpeterparker%2Fweb-photo-filter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterpeterparker%2Fweb-photo-filter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterpeterparker%2Fweb-photo-filter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterpeterparker%2Fweb-photo-filter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peterpeterparker","download_url":"https://codeload.github.com/peterpeterparker/web-photo-filter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238855971,"owners_count":19542117,"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":["canvas","image-processing","instagram","instagram-filters","photos","stencil","stenciljs","webcomponents","webgl","webgl-filters"],"created_at":"2024-10-12T01:29:08.596Z","updated_at":"2025-10-29T16:32:55.321Z","avatar_url":"https://github.com/peterpeterparker.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# Web Photo Filter\n\nWeb Photo Filter is a web component to apply Instagram-like WebGL filters to photos.\n\n[![GitHub release](https://img.shields.io/github/release/peterpeterparker/web-photo-filter/all?logo=GitHub)](https://github.com/peterpeterparker/web-photo-filter/releases/latest)\n[![Tweet](https://img.shields.io/twitter/url?url=https%3A%2F%webphotofilter.com)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fwebphotofilter.com\u0026text=A%20web%20component%20to%20apply%20Instagram-like%20WebGL%20filters%20to%20photos%20by%20%40daviddalbusco)\n\n## Table of contents\n\n- [Introduction](#introduction)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Credits](#credits)\n- [Limitation](#limitation)\n- [Tutorial](#tutorial)\n\n## Introduction\n\nThis component has for goal to make Instagram-like filters for photos accessible for the web.\n\n### Image modification solutions and fast processing\n\nOthers web based filter solutions often use CSS (for example [Instagram.css](https://picturepan2.github.io/instagram.css/)) or Javascript to modify images.\n\nApplying CSS do not modify the underlying image, and \u003cstrong\u003eonly\u003c/strong\u003e apply a visual layer to it.\n\nMost Javascript based solutions are not always optimized well enough to be used on mobile devices.\n\nI was looking to create an almost instantaneous filter solution, similar to what Instagram leverages in its mobile application.\n\n### Supported by major browsers and devices\n\nAs of Feburary 2018, Web Photo Filter utilizes [WebGL](https://caniuse.com/#feat=webgl) based technology because it is well supported across modern browsers and mobile devices.\n\nIn the future, Web Photo Filter may use [WebGL 2](https://caniuse.com/#search=webgl%202) when it will be better supported.\n\nIn case WebGL would not be supported on a particular platform, and to avoid producing an error, the component will display the original image without modification.\n\n### Lightweight, fast boot time, lazy loading, support across the most popular frontend frameworks\n\nThis project is a web component built with the amazing [Stencil](https://stenciljs.com) compiler.\n\n## Installation\n\n```bash\nnpm install web-photo-filter\n```\n\n### React\n\nYou can use a [React specific wrapper](https://github.com/peterpeterparker/web-photo-filter-react) for this component.\n\nInstall it as following:\n\n```bash\nnpm install web-photo-filter-react\n```\n\nConsume it in your code:\n\n```javascript\nimport {WebPhotoFilter} from 'web-photo-filter-react/dist';\n\nrender() {\n    return \u003cWebPhotoFilter/\u003e\n}\n```\n\n## Usage\n\nThe Web Photo Filter Component can be use as following:\n\n```html\n\u003cweb-photo-filter src=\"assets/img/test.jpg\" filter=\"sepia\"\u003e\u003c/web-photo-filter\u003e\n```\n\nThe only required parameter is the img `src` tag. It also supports images provided as `https` if the `anonymous` [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) can be use.\n\n### Filter\n\nFilter is an optional parameter. Omitting this attribute or specifying a null value will result in no processing within the component. The source image will be displayed unmodified.\n\nThe list of available filters is available in class `src/types/web-photo-filter-type.ts`. Currently: `sepia`, `blue_monotone`, `violent_tomato`, `greyscale`, `desaturate`, `brightness`, `saturation`, `contrast`, `hue`, `cookie`, `vintage`, `koda`, `technicolor`, `polaroid`, `bgr`.\n\nYou can provide a unique filter or, a comma separated list of multiple filters.\n\n`filter` is a **string** parameter\n\n#### Example: Sepia\n\n```html\n\u003cweb-photo-filter src=\"assets/img/test.jpg\" filter=\"sepia\"\u003e\u003c/web-photo-filter\u003e\n```\n\n#### Example: Multiple filters\n\n```html\n\u003cweb-photo-filter src=\"assets/img/test.jpg\" filter=\"technicolor, saturation(1.6), contrast\"\u003e\u003c/web-photo-filter\u003e\n```\n\n### FilterLoad\n\nIf you would like to start or process the result after the component did finish is processing, an event will be triggered containing the resulting image (no filter) or canvas. In addition, it contains also an indication telling you if WebGL is supported or not.\n\n```html\n\u003cweb-photo-filter onFilterLoad={($event) =\u003e imageLoaded($event)} src=\"imgURI\" filter=\"sepia\"\u003e\u003c/web-photo-filter\u003e\n```\n\nThe description of the event is available in the interface `src/types/web-photo-filter-result.ts`\n\n`filterLoad` emit an **event** of type `WebPhotoFilterResult`\n\n### Level\n\nSome filters (brightness, saturation, contrast and hue) are variable. To modify their default values, you could use the variable `level`.\n\nIf multiple filter are provided, it applies to all except if a specific level is provided for a filter, such as for example `saturation(1.1)`.\n\n```html\n\u003cweb-photo-filter src=\"assets/img/test.jpg\" filter=\"brightness\" level=\"1.2\"\u003e\u003c/web-photo-filter\u003e\n```\n\n`level` is a **number** parameter\n\n## Credits\n\nThis web component would not had been possible without the brilliant [article](https://www.madebymike.com.au/writing/canvas-image-manipulation/) and WebGL core processing code written by [Mike Riethmuller](https://github.com/MadeByMike) :heart:\n\nThe sources of nine filters (Brownie, Brightnes, etc.) were adapted from the project [WebGLImageFilter](https://github.com/phoboslab/WebGLImageFilter) by [Dominic Szablewski](http://phoboslab.org/) :+1:\n\n## Limitation\n\nWebGL is well supported by most modern browsers, but there may be some use cases where it is not. In the case that WebGL is not supported, there is a fallback scenario implemented in the component.\n\n### iOS (WKWebView)\n\nWhile testing a couple of years ago, I found out that Web Photo Filter works very well on iPhone 6 and above. It is possible to load all filters on the same page without performance issues.\n\n### Android (WebView)\n\nLikewise I discovered that these filters do not work very well on Android 7 and above. Testing for Android was ran on a Samsung Edge (Android 7.1), Nexus 5X and Sony (Android 8.1).\n\nThe Android Webview seems to handle canvas less actively and it's iPhone counterpart. Therefore I do not recommend using all filters on the same page, but only integrating a few of them at a time, otherwise you'll see a negative performance impact.\n\n## Tutorial\n\n[Simon Grimm (@saimon24)](https://github.com/saimon24) published a tutorial [\"Ionic Image Filter Like Instagram Using WebGL Filters\"](https://ionicacademy.com/ionic-image-filter-webgl/) which displays step by step how to create a Ionic app and include this component easily.\n\n**Note**: to follow this tutorial, version 2 of the component has to be use.\n\n## License\n\nMIT © [David Dal Busco](mailto:david.dalbusco@outlook.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterpeterparker%2Fweb-photo-filter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeterpeterparker%2Fweb-photo-filter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterpeterparker%2Fweb-photo-filter/lists"}