https://github.com/eastsun5566/cc-gram
🖼 A CSS & Canvas Instagram filter inspired by CSSgram
https://github.com/eastsun5566/cc-gram
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
Last synced: about 2 months ago
JSON representation
🖼 A CSS & Canvas Instagram filter inspired by CSSgram
- Host: GitHub
- URL: https://github.com/eastsun5566/cc-gram
- Owner: EastSun5566
- License: mit
- Created: 2019-04-20T15:53:25.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-11-21T18:48:34.000Z (5 months ago)
- Last Synced: 2025-02-25T12:51:39.916Z (2 months ago)
- 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
- Language: TypeScript
- Homepage: https://eastsun5566.github.io/cc-gram/
- Size: 21.8 MB
- Stars: 23
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 🖼 CCgram
[](https://www.npmjs.com/package/cc-gram)
[](https://www.npmjs.com/package/cc-gram)
[](https://jsr.io/@eastsun5566/cc-gram)
[](https://github.com/EastSun5566/cc-gram/actions/workflows/test.yml)
[](https://github.com/EastSun5566/cc-gram/blob/main/LICENSE)
[
](https://www.buymeacoffee.com/eastsun5566)
> A CSS & Canvas Instagram filter inspired by CSSgram
🔗
## 🤔 Why
> [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.
- On-Demand: Utilizes CSS for previewing and draws with the Canvas API as needed
- Non-Blocking: Images are drawn on a Web Worker using `OffscreenCanvas` & `ImageBitmap`
## ✨ Installation
```sh
npm i cc-gram
```
## 🚀 Usage
### Apply CSS filter
#### HTML
> An image tag with `data-filter` attribute is filter name
```html
```
#### JavaScript
> Initialize to apply CSS filter to All targets has `data-filter` attribute
```js
import { createFilter } from "cc-gram";
const filter = createFilter();
```
```js
// or you can turn off init apply
const filter = createFilter({ init: false });
// you can also specify data attribute
// i.e., ![]()
const filter = createFilter({ dataAttribute: "my-attr" });
```
---
##### Manual apply CSS filter
> `applyFilter()`
```js
// apply to All targets has `data-filter` attribute
filter.applyFilter();
// or you can just use selector for performance
filter.applyFilter("#my-image");
```
##### All available filter name list
> `filterNames`
```js
const filterNames = filter.filterNames;
```
- Default filter Name list:
- `aden`
- `inkwell`
- `reyes`
- `gingham`
- `toaster`
- `walden`
- `hudson`
- `earlybird`
- `mayfair`
- `lofi`
- `1977`
- `brooklyn`
- `xpro2`
- `nashville`
- `lark`
- `moon`
- `clarendon`
- `willow`
- `rise`
- `slumber`
- `brannan`
- `valencia`
- `maven`
- `stinson`
- `amaro`
##### Add / Set filter to the filter list
> `setFilter(name, setting)`
- name: `string` - The filter name
- setting: `object` - The filter setting
```js
filter.setFilter("my-filter", {
saturate: 0.8,
contrast: 1.2,
});
```
- Available setting key (all value is number):
- `blur`
- `brightness`
- `contrast`
- `grayscale`
- `hue-rotate`
- `invert`
- `saturate`
- `sepia`
##### Remove the filter from the filter list
> `removeFilter(name)`
- name: `string` - The filter name
```js
filter.removeFilter("my-filter");
```
---
### Access image with filter
```js
const image = document.querySelector('img[data-filter="1977"]');
```
#### Data URL
> `getDataURL(image[, options = {}])`
```js
const dataUrl = await filter.getDataURL(image);
```
#### Blob
> `getBlob(image[, options = {}])`
```js
const blob = await filter.getBlob(image, {
type: "image/jpeg",
quality: 0.8,
});
```
- Options
- type: `string` - MIME types, defaults to `image/png`,
- quality: `number`- [0 - 1], defaults to `0.92`
## 🔧 Development
```sh
# install deps
pnpm i
# fix style
pnpm run lint
# run test
pnpm test
# build for prod
pnpm run build
```