/cc-gram

🖼 A CSS & Canvas Instagram filters based on CSSgram

Primary LanguageTypeScriptMIT LicenseMIT

CCgram

NPM Version NPM Downloads Test Status License

🖼 A CSS & Canvas Instagram filters based on CSSgram

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

Demo GIF

🤔 The Why

CSSgram is a great CSS filters library, but sometimes you want to access/download the filter image. Then CCgram comes into the play. It uses pure CSS to preview filters and draw it with Canvas when you need it.

  • On-Demand: Uses CSS to preview & draw with Canvas API on demand.
  • Non-Blocking: Draw an image on Web Worker with 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 Filter image

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

🔧 Development

# install deps
pnpm i

# fix style
pnpm run lint

# run test
pnpm test

# build for prod
pnpm run build