{"id":25860934,"url":"https://github.com/eastsun5566/cc-gram","last_synced_at":"2025-12-29T13:51:34.710Z","repository":{"id":34679312,"uuid":"182425009","full_name":"EastSun5566/cc-gram","owner":"EastSun5566","description":"🖼 A CSS \u0026 Canvas Instagram filter inspired by CSSgram","archived":false,"fork":false,"pushed_at":"2024-11-21T18:48:34.000Z","size":22807,"stargazers_count":23,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-25T12:51:39.916Z","etag":null,"topics":["canvas","canvas-instagram-filters","css","css-filter","cssgram","filter","image","image-bitmap","instagram","library","no-dependencies","non-blocking","offscreen-canvas","on-demand","typescript","web-worker"],"latest_commit_sha":null,"homepage":"https://eastsun5566.github.io/cc-gram/","language":"TypeScript","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/EastSun5566.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-20T15:53:25.000Z","updated_at":"2025-01-31T08:36:19.000Z","dependencies_parsed_at":"2023-01-15T08:45:28.520Z","dependency_job_id":"4baf3132-cd95-418e-9c14-807430baf983","html_url":"https://github.com/EastSun5566/cc-gram","commit_stats":{"total_commits":208,"total_committers":2,"mean_commits":104.0,"dds":"0.13942307692307687","last_synced_commit":"6effcbad2680f90114000823f00a12738736440b"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EastSun5566%2Fcc-gram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EastSun5566%2Fcc-gram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EastSun5566%2Fcc-gram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EastSun5566%2Fcc-gram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EastSun5566","download_url":"https://codeload.github.com/EastSun5566/cc-gram/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241435164,"owners_count":19962404,"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","canvas-instagram-filters","css","css-filter","cssgram","filter","image","image-bitmap","instagram","library","no-dependencies","non-blocking","offscreen-canvas","on-demand","typescript","web-worker"],"created_at":"2025-03-01T23:03:18.875Z","updated_at":"2025-12-29T13:51:34.704Z","avatar_url":"https://github.com/EastSun5566.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/eastsun5566"],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://github.com/EastSun5566/cc-gram/blob/main/logo.webp?raw=true\" alt=\"CCgram Logo\" width=\"180\"\u003e\n\n# 🖼 CCgram\n\n[![NPM Version](https://img.shields.io/npm/v/cc-gram.svg?style=for-the-badge)](https://www.npmjs.com/package/cc-gram)\n[![NPM Downloads](https://img.shields.io/npm/dt/cc-gram.svg?style=for-the-badge)](https://www.npmjs.com/package/cc-gram)\n[![JSR Version](https://img.shields.io/jsr/v/%40eastsun5566/cc-gram?style=for-the-badge)](https://jsr.io/@eastsun5566/cc-gram)\n[![Test Status](https://img.shields.io/github/actions/workflow/status/EastSun5566/cc-gram/test.yml?style=for-the-badge)](https://github.com/EastSun5566/cc-gram/actions/workflows/test.yml)\n[![License](https://img.shields.io/github/license/EastSun5566/cc-gram.svg?style=for-the-badge)](https://github.com/EastSun5566/cc-gram/blob/main/LICENSE)\n\n[\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-blue.png\" alt=\"Buy Me A Coffee\" height=\"40\"\u003e](https://www.buymeacoffee.com/eastsun5566)\n\n\u003e A CSS \u0026 Canvas Instagram filter inspired by CSSgram\n\n🔗 \u003chttps://eastsun5566.github.io/cc-gram/\u003e\n\n![Demo GIF](./demo.gif)\n\n## 🤔 Why\n\n\u003e [CSSgram](https://github.com/una/CSSgram) is an excellent CSS filter library. However, there are instances where you might need to access or download the image with filter. This is where CCgram comes into play. It enables you to preview filter using pure CSS and draw them with Canvas whenever you need to.\n\n- On-Demand: Utilizes CSS for previewing and draws with the Canvas API as needed\n- Non-Blocking: Images are drawn on a Web Worker using `OffscreenCanvas` \u0026 `ImageBitmap`\n\n## ✨ Installation\n\n```sh\nnpm i cc-gram\n```\n\n## 🚀 Usage\n\n### Apply CSS filter\n\n#### HTML\n\n\u003e An image tag with `data-filter` attribute is filter name\n\n```html\n\u003cimg src=\"./my-picture.png\" data-filter=\"1977\" /\u003e\n```\n\n#### JavaScript\n\n\u003e Initialize to apply CSS filter to All targets has `data-filter` attribute\n\n```js\nimport { createFilter } from \"cc-gram\";\n\nconst filter = createFilter();\n```\n\n```js\n// or you can turn off init apply\nconst filter = createFilter({ init: false });\n\n// you can also specify data attribute\n// i.e., \u003cimg data-my-attr=\"1977\"\u003e\nconst filter = createFilter({ dataAttribute: \"my-attr\" });\n```\n\n---\n\n##### Manual apply CSS filter\n\n\u003e `applyFilter()`\n\n```js\n// apply to All targets has `data-filter` attribute\nfilter.applyFilter();\n\n// or you can just use selector for performance\nfilter.applyFilter(\"#my-image\");\n```\n\n##### All available filter name list\n\n\u003e `filterNames`\n\n```js\nconst filterNames = filter.filterNames;\n```\n\n- Default filter Name list:\n\n  - `aden`\n  - `inkwell`\n  - `reyes`\n  - `gingham`\n  - `toaster`\n  - `walden`\n  - `hudson`\n  - `earlybird`\n  - `mayfair`\n  - `lofi`\n  - `1977`\n  - `brooklyn`\n  - `xpro2`\n  - `nashville`\n  - `lark`\n  - `moon`\n  - `clarendon`\n  - `willow`\n  - `rise`\n  - `slumber`\n  - `brannan`\n  - `valencia`\n  - `maven`\n  - `stinson`\n  - `amaro`\n\n##### Add / Set filter to the filter list\n\n\u003e `setFilter(name, setting)`\n\n- name: `string` - The filter name\n- setting: `object` - The filter setting\n\n```js\nfilter.setFilter(\"my-filter\", {\n  saturate: 0.8,\n  contrast: 1.2,\n});\n```\n\n- Available setting key (all value is number):\n\n  - `blur`\n  - `brightness`\n  - `contrast`\n  - `grayscale`\n  - `hue-rotate`\n  - `invert`\n  - `saturate`\n  - `sepia`\n\n##### Remove the filter from the filter list\n\n\u003e `removeFilter(name)`\n\n- name: `string` - The filter name\n\n```js\nfilter.removeFilter(\"my-filter\");\n```\n\n---\n\n### Access image with filter\n\n```js\nconst image = document.querySelector('img[data-filter=\"1977\"]');\n```\n\n#### Data URL\n\n\u003e `getDataURL(image[, options = {}])`\n\n```js\nconst dataUrl = await filter.getDataURL(image);\n```\n\n#### Blob\n\n\u003e `getBlob(image[, options = {}])`\n\n```js\nconst blob = await filter.getBlob(image, {\n  type: \"image/jpeg\",\n  quality: 0.8,\n});\n```\n\n- Options\n\n  - type: `string` - MIME types, defaults to `image/png`,\n  - quality: `number` - [0 - 1], defaults to `0.92`\n  - filter: `string` - Override filter name, defaults to reading from data attribute\n\n##### Override filter\n\nYou can override the filter applied to the image by passing a `filter` option:\n\n```js\n// Image has data-filter=\"1977\"\nconst image = document.querySelector('img[data-filter=\"1977\"]');\n\n// Apply a different filter when getting the image data\nconst dataUrl = await filter.getDataURL(image, { filter: \"inkwell\" });\nconst blob = await filter.getBlob(image, { filter: \"valencia\" });\n```\n\n## 🔧 Development\n\n```sh\n# install deps\npnpm i\n\n# fix style\npnpm run lint\n\n# run test\npnpm test\n\n# build for prod\npnpm run build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feastsun5566%2Fcc-gram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feastsun5566%2Fcc-gram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feastsun5566%2Fcc-gram/lists"}