🖼 CCgram

A CSS & Canvas Instagram filter inspired by CSSgram

🔗 https://eastsun5566.github.io/cc-gram/

🤔 Why

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

npm i cc-gram

🚀 Usage

Apply CSS filter

HTML

An image tag with data-filter attribute is filter name

<img src="./my-picture.png" data-filter="1977" />

JavaScript

Initialize to apply CSS filter to All targets has data-filter attribute

import { createFilter } from "cc-gram";

const filter = createFilter();

// or you can turn off init apply
const filter = createFilter({ init: false });

// you can also specify data attribute
// i.e., <img data-my-attr="1977">
const filter = createFilter({ dataAttribute: "my-attr" });

Manual apply CSS filter

applyFilter()

// 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

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

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

filter.removeFilter("my-filter");

Access image with filter

const image = document.querySelector('img[data-filter="1977"]');

Data URL

getDataURL(image[, options = {}])

const dataUrl = await filter.getDataURL(image);

Blob

getBlob(image[, options = {}])

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
  • filter: string - Override filter name, defaults to reading from data attribute

Override filter

You can override the filter applied to the image by passing a filter option:

// Image has data-filter="1977"
const image = document.querySelector('img[data-filter="1977"]');

// Apply a different filter when getting the image data
const dataUrl = await filter.getDataURL(image, { filter: "inkwell" });
const blob = await filter.getBlob(image, { filter: "valencia" });

🔧 Development

# install deps
pnpm i

# fix style
pnpm run lint

# run test
pnpm test

# build for prod
pnpm run build