README
CCgram
🖼 A CSS & Canvas Instagram filters based on CSSgram
✨ Install
npm i cc-gram
# or yarn add 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 CCGram from "cc-gram";
const cg = new CCGram();
Manual apply CSS filter
applyFilter()
// apply to All targets has `data-filter` attribute
cg.applyFilter();
// or you can just use selector
cg.applyFilter("#my-image");
All available filter name list
filterNames
const { filterNames } = cg;
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 filter list
setFilter(name, setting)
- name:
string
- The filter name - setting:
object
- The filter setting
cg.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 filter from filter list
removeFilter(name)
- name:
string
- The filter name
cg.removeFilter("my-filter");
Access Filter image
const target = document.querySelector('img[data-filter="1977"]');
Data URL
getDataURL(image[, options = {}])
const dataUrl = await ccGram.getDataURL(target);
Blob
getBlob(image[, options = {}])
const blob = await cg.getBlob(target, {
type: "image/jpeg",
quality: 0.8,
});
Options
- type:
string
- MIME types, default isimage/png
, - quality:
number
- [0 - 1], default is0.92
- type:
🔧 Develop
# install dependencies
yarn
# fix style
yarn lint
# run test
yarn test
# build for production
yarn build