cc-gram 0.2.1 → 1.0.0

package/README.md

@@ -1,15 +1,27 @@
 # CCgram
 
-[![Build Status](https://travis-ci.org/EastSun5566/cc-gram.svg?branch=master)](https://travis-ci.org/EastSun5566/cc-gram) [![npm](https://img.shields.io/npm/v/cc-gram.svg)](https://www.npmjs.com/package/cc-gram)
+[![NPM Version](https://img.shields.io/npm/v/cc-gram.svg?style=for-the-badge)](https://www.npmjs.com/package/cc-gram)
+[![NPM Downloads](https://img.shields.io/npm/dt/cc-gram.svg?style=for-the-badge)](https://www.npmjs.com/package/cc-gram)
+[![Build Status](https://img.shields.io/github/workflow/status/EastSun5566/cc-gram/Test/master.svg?style=for-the-badge)](https://github.com/EastSun5566/cc-gram/actions?query=workflow%3ATest)
+[![License](https://img.shields.io/github/license/EastSun5566/cc-gram.svg?style=for-the-badge)](https://github.com/EastSun5566/cc-gram/blob/master/LICENSE)
 
 > 🖼 A CSS & Canvas Instagram filters based on CSSgram
 
-## ✨ Install
+🔗 <https://eastsun5566.github.io/cc-gram/>
+
+![Demo GIF](./demo.gif)
+
+## 🤔 The Why
+
+> [CSSgram](https://github.com/una/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
 
 ```sh
 npm i cc-gram
-
-# or yarn add cc-gram
 ```
 
 ## 🚀 Usage
@@ -29,9 +41,18 @@ npm i cc-gram
 > Initialize to apply CSS filter to All targets has `data-filter` attribute
 
 ```js
-import CCGram from "cc-gram";
+import { createFilter } from "cc-gram";
+
+const filter = createFilter();
+```
+
+```js
+// or you can turn off init apply
+const filter = createFilter({ init: false });
 
-const cg = new CCGram();
+// you can also specify data attribute
+// i.e., <img data-my-attr="1977">
+const filter = createFilter({ dataAttribute: "my-attr" });
 ```
 
 ---
@@ -42,10 +63,10 @@ const cg = new CCGram();
 
 ```js
 // apply to All targets has `data-filter` attribute
-cg.applyFilter();
+filter.applyFilter();
 
-// or you can just use selector
-cg.applyFilter("#my-image");
+// or you can just use selector for performance
+filter.applyFilter("#my-image");
 ```
 
 ##### All available filter name list
@@ -53,7 +74,7 @@ cg.applyFilter("#my-image");
 > `filterNames`
 
 ```js
-const { filterNames } = cg;
+const filterNames = filter.filterNames;
 ```
 
 - Default filter Name list:
@@ -84,7 +105,7 @@ const { filterNames } = cg;
   - `stinson`
   - `amaro`
 
-##### Add / Set filter to filter list
+##### Add / Set filter to the filter list
 
 > `setFilter(name, setting)`
 
@@ -92,7 +113,7 @@ const { filterNames } = cg;
 - setting: `object` - The filter setting
 
 ```js
-cg.setFilter("my-filter", {
+filter.setFilter("my-filter", {
   saturate: 0.8,
   contrast: 1.2,
 });
@@ -109,14 +130,14 @@ cg.setFilter("my-filter", {
   - `saturate`
   - `sepia`
 
-##### Remove filter from filter list
+##### Remove the filter from the filter list
 
 > `removeFilter(name)`
 
 - name: `string` - The filter name
 
 ```js
-cg.removeFilter("my-filter");
+filter.removeFilter("my-filter");
 ```
 
 ---
@@ -124,7 +145,7 @@ cg.removeFilter("my-filter");
 ### Access Filter image
 
 ```js
-const target = document.querySelector('img[data-filter="1977"]');
+const image = document.querySelector('img[data-filter="1977"]');
 ```
 
 #### Data URL
@@ -132,7 +153,7 @@ const target = document.querySelector('img[data-filter="1977"]');
 > `getDataURL(image[, options = {}])`
 
 ```js
-const dataUrl = await ccGram.getDataURL(target);
+const dataUrl = await filter.getDataURL(image);
 ```
 
 #### Blob
@@ -140,7 +161,7 @@ const dataUrl = await ccGram.getDataURL(target);
 > `getBlob(image[, options = {}])`
 
 ```js
-const blob = await cg.getBlob(target, {
+const blob = await filter.getBlob(image, {
   type: "image/jpeg",
   quality: 0.8,
 });
@@ -148,21 +169,21 @@ const blob = await cg.getBlob(target, {
 
 - Options
 
-  - type: `string` - MIME types, default is `image/png`,
-  - quality: `number`- [0 - 1], default is `0.92`
+  - type: `string` - MIME types, defaults to `image/png`,
+  - quality: `number`- [0 - 1], defaults to `0.92`
 
-## 🔧 Develop
+## 🔧 Development
 
 ```sh
-# install dependencies
-yarn
+# install deps
+pnpm i
 
 # fix style
-yarn lint
+pnpm run lint
 
 # run test
-yarn test
+pnpm test
 
-# build for production
-yarn build
+# build for prod
+pnpm run build
 ```

package/dist/core.d.ts

@@ -0,0 +1,60 @@
+import { FilterName, FilterSetting } from './filters';
+import { Options, ParseOptions } from './types';
+export declare const DEFAULT_DATA_ATTRIBUTE = "filter";
+/** 🖼 A CSS & Canvas Instagram filters based on CSSgram */
+export declare class CCgram {
+    static readonly DEFAULT_DATA_ATTRIBUTE = "filter";
+    static readonly DEFAULT_FILTERS: Map<string, FilterSetting>;
+    /** filter list */
+    protected readonly _filters: Map<string, FilterSetting>;
+    /** data attribute */
+    protected _dataAttribute: string;
+    /** Initialize CSS filter to all targets */
+    constructor({ dataAttribute, init, }?: Options);
+    /** The filter name list */
+    get filterNames(): FilterName[];
+    /**
+     * Add/Set filter
+     * @param name - the Filter name
+     * @param setting - the Filter setting
+     */
+    setFilter(name: FilterName, setting: FilterSetting): void;
+    /**
+     * Remove filter
+     * @param name - the Filter name
+     */
+    removeFilter(name: FilterName): boolean;
+    /**
+     * Get setting object of filter
+     * @param [name=''] - The filter name
+     */
+    getFilterSetting(name?: FilterName): FilterSetting | void;
+    /**
+     * Get the CSS inline style string of filter
+     * @param [name=''] - The filter name
+     */
+    getFilterStyle(name?: FilterName): string;
+    /**
+     * Apply CSS filter to all targets
+     * @param [selectors='img[data-${this._dataAttribute}]'] - selectors
+     */
+    applyFilter(selectors?: string): void;
+    /**
+     * Get the data URL of image element
+     * @param image - image element
+     * @param [options] - options
+     */
+    getDataURL(image: HTMLImageElement, options?: ParseOptions): Promise<string | null>;
+    /**
+     * Get the blob of image element
+     * @param image - image element
+     * @param [options={}] - parse options
+     */
+    getBlob(image: HTMLImageElement, options?: ParseOptions): Promise<Blob | null>;
+}
+/** old Name, alias for `CCgram` */
+export declare const CCGram: typeof CCgram;
+/** alias for `CCgram` */
+export declare const Filter: typeof CCgram;
+export declare type FilterInstance = InstanceType<typeof CCgram>;
+export declare function createFilter(options: Options): FilterInstance;

package/dist/{types/filters.d.ts → filters.d.ts}

@@ -1,10 +1,10 @@
 /**
  * Base on CSSgram by Una Kravets
- * @see CSSgram <https://github.com/una/CSSgram>
+ * @see CSSgram {@link https://github.com/una/CSSgram}
  */
 /** The Name of Filter */
 export declare type FilterName = string;
-/** The Setting of Filter */
+/** The Setting object of Filter */
 export interface FilterSetting {
     blur?: number;
     brightness?: number;
@@ -18,4 +18,3 @@ export interface FilterSetting {
 }
 /** The default Filter List */
 export declare const DEFAULT_FILTERS: Map<FilterName, FilterSetting>;
-export default DEFAULT_FILTERS;

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @package cc-gram <https://github.com/EastSun5566/cc-gram>
+ *
+ * @license MIT
+ * @copyright (c) 2019 - present
+ * @author 汪東陽 EastSun5566 <https://github.com/EastSun5566>
+ */
+export { Filter as default } from './core';
+export * from './filters';
+export * from './core';

package/dist/index.esm.js

@@ -0,0 +1 @@
+function t(t,e,r,n){return new(r||(r=Promise))((function(a,s){function i(t){try{c(n.next(t))}catch(t){s(t)}}function o(t){try{c(n.throw(t))}catch(t){s(t)}}function c(t){var e;t.done?a(t.value):(e=t.value,e instanceof r?e:new r((function(t){t(e)}))).then(i,o)}c((n=n.apply(t,e||[])).next())}))}const e=new Map([["aden",{"hue-rotate":-20,contrast:.9,brightness:1.2,saturate:.85}],["inkwell",{sepia:.3,contrast:1.1,brightness:1.1,grayscale:1}],["reyes",{sepia:.22,contrast:.85,brightness:1.1,saturate:.75}],["gingham",{"hue-rotate":-10,brightness:1.05}],["toaster",{contrast:1.5,brightness:.9}],["walden",{"hue-rotate":-10,brightness:1.1,sepia:.3,saturate:1.6}],["hudson",{brightness:1.2,contrast:.9,saturate:1.1}],["earlybird",{contrast:.9,sepia:.2}],["mayfair",{contrast:1.1,saturate:1.1}],["lofi",{contrast:1.5,saturate:1.1}],["1977",{contrast:1.1,brightness:1.1,saturate:1.3}],["brooklyn",{contrast:.9,brightness:1.1}],["xpro2",{sepia:.3}],["nashville",{contrast:1.2,brightness:1.05,saturate:1.2,sepia:.2}],["lark",{contrast:.9}],["moon",{brightness:1.1,contrast:1.1,grayscale:1}],["clarendon",{contrast:1.2,saturate:1.35}],["willow",{contrast:.95,brightness:.9,grayscale:.5}],["rise",{contrast:.9,brightness:1.05,sepia:.2,saturate:.9}],["slumber",{brightness:1.05,saturate:.66}],["brannan",{contrast:1.4,sepia:.5}],["valencia",{contrast:1.08,brightness:1.08,sepia:.08}],["maven",{contrast:.95,brightness:1.95,saturate:1.5,sepia:.25}],["stinson",{contrast:.75,brightness:1.15,saturate:.85}],["amaro",{"hue-rotate":-10,contrast:.9,brightness:1.1,saturate:1.5}]]),r="undefined"!=typeof OffscreenCanvas;function n(t,e="internal error."){if(!t)throw Error(`[CCgram] ${e}`)}function a(t){n(t&&"IMG"===t.tagName,"The first argument is required and must be an <img> element."),n(t.src,"The <img> element src attribute is empty.")}function s({data:t}){const{canvas:e,image:r,filterStyle:n,options:a}=t,s=e.getContext("2d",{alpha:!1});if(!s)throw new Error("The 2d context canvas is not supported.");return s.filter=n,s.drawImage(r,0,0),e.convertToBlob(a)}const i="filter";class o{constructor({dataAttribute:t="filter",init:r=!0}={}){if(this._filters=e,this._dataAttribute=t,!r)return;if("complete"===document.readyState)return void this.applyFilter();const n=()=>{this.applyFilter(),document.removeEventListener("DOMContentLoaded",n)};document.addEventListener("DOMContentLoaded",n)}get filterNames(){return[...this._filters.keys()]}setFilter(t,e){this._filters.set(t,e)}removeFilter(t){return this._filters.delete(t)}getFilterSetting(t=""){return this._filters.get(t)}getFilterStyle(t=""){return function(t){return t?Object.keys(t).map((e=>`${e}(${t[e]}${"hue-rotate"===e?"deg":"blur"===e?"px":""})`)).join(" "):"none"}(this._filters.get(t))}applyFilter(t=`img[data-${this._dataAttribute}]`){document.querySelectorAll(t).forEach((t=>{const{dataset:e}=t;t.style.setProperty("filter",this.getFilterStyle(e[this._dataAttribute]))}))}getDataURL(e,r={}){return t(this,void 0,void 0,(function*(){a(e);const t=yield this.getBlob(e,r);if(!t)return null;const n=new FileReader;return new Promise((e=>{n.addEventListener("load",(()=>{e(n.result)})),n.readAsDataURL(t)}))}))}getBlob(e,n={}){return t(this,void 0,void 0,(function*(){a(e);const{naturalWidth:t,naturalHeight:i}=e,o=this.getFilterStyle(e.dataset[this._dataAttribute]);if(r){const r=new OffscreenCanvas(t,i),a=yield createImageBitmap(e);return new Promise((t=>{const e=function(t){const e=`\n    const work = ${t.toString()};\n\n    addEventListener('message', async (...params) => {\n      const res = await work(...params);\n      postMessage(res);\n    });\n  `,r=URL.createObjectURL(new Blob([e],{type:"text/javascript"})),n=new Worker(r),{terminate:a}=n;return n.terminate=()=>{URL.revokeObjectURL(r),a.call(n)},n}(s);e.addEventListener("message",(({data:r})=>{t(r),e.terminate()})),e.postMessage({canvas:r,image:a,filterStyle:o,options:n},[r,a])}))}const c=document.createElement("canvas");c.width=t,c.height=i;const l=c.getContext("2d",{alpha:!1});if(!l)throw new Error("The 2d context canvas is not supported.");l.filter=o,l.drawImage(e,0,0);const{type:u,quality:h}=n;return new Promise((t=>c.toBlob((e=>t(e)),u,h)))}))}}o.DEFAULT_DATA_ATTRIBUTE="filter",o.DEFAULT_FILTERS=e;const c=o,l=o;function u(t){return new l(t)}export{c as CCGram,o as CCgram,i as DEFAULT_DATA_ATTRIBUTE,e as DEFAULT_FILTERS,l as Filter,u as createFilter,l as default};

package/dist/index.umd.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).CCGram={})}(this,(function(t){"use strict";function e(t,e,r,n){return new(r||(r=Promise))((function(a,s){function i(t){try{c(n.next(t))}catch(t){s(t)}}function o(t){try{c(n.throw(t))}catch(t){s(t)}}function c(t){var e;t.done?a(t.value):(e=t.value,e instanceof r?e:new r((function(t){t(e)}))).then(i,o)}c((n=n.apply(t,e||[])).next())}))}const r=new Map([["aden",{"hue-rotate":-20,contrast:.9,brightness:1.2,saturate:.85}],["inkwell",{sepia:.3,contrast:1.1,brightness:1.1,grayscale:1}],["reyes",{sepia:.22,contrast:.85,brightness:1.1,saturate:.75}],["gingham",{"hue-rotate":-10,brightness:1.05}],["toaster",{contrast:1.5,brightness:.9}],["walden",{"hue-rotate":-10,brightness:1.1,sepia:.3,saturate:1.6}],["hudson",{brightness:1.2,contrast:.9,saturate:1.1}],["earlybird",{contrast:.9,sepia:.2}],["mayfair",{contrast:1.1,saturate:1.1}],["lofi",{contrast:1.5,saturate:1.1}],["1977",{contrast:1.1,brightness:1.1,saturate:1.3}],["brooklyn",{contrast:.9,brightness:1.1}],["xpro2",{sepia:.3}],["nashville",{contrast:1.2,brightness:1.05,saturate:1.2,sepia:.2}],["lark",{contrast:.9}],["moon",{brightness:1.1,contrast:1.1,grayscale:1}],["clarendon",{contrast:1.2,saturate:1.35}],["willow",{contrast:.95,brightness:.9,grayscale:.5}],["rise",{contrast:.9,brightness:1.05,sepia:.2,saturate:.9}],["slumber",{brightness:1.05,saturate:.66}],["brannan",{contrast:1.4,sepia:.5}],["valencia",{contrast:1.08,brightness:1.08,sepia:.08}],["maven",{contrast:.95,brightness:1.95,saturate:1.5,sepia:.25}],["stinson",{contrast:.75,brightness:1.15,saturate:.85}],["amaro",{"hue-rotate":-10,contrast:.9,brightness:1.1,saturate:1.5}]]),n="undefined"!=typeof OffscreenCanvas;function a(t,e="internal error."){if(!t)throw Error(`[CCgram] ${e}`)}function s(t){a(t&&"IMG"===t.tagName,"The first argument is required and must be an <img> element."),a(t.src,"The <img> element src attribute is empty.")}function i({data:t}){const{canvas:e,image:r,filterStyle:n,options:a}=t,s=e.getContext("2d",{alpha:!1});if(!s)throw new Error("The 2d context canvas is not supported.");return s.filter=n,s.drawImage(r,0,0),e.convertToBlob(a)}const o="filter";class c{constructor({dataAttribute:t="filter",init:e=!0}={}){if(this._filters=r,this._dataAttribute=t,!e)return;if("complete"===document.readyState)return void this.applyFilter();const n=()=>{this.applyFilter(),document.removeEventListener("DOMContentLoaded",n)};document.addEventListener("DOMContentLoaded",n)}get filterNames(){return[...this._filters.keys()]}setFilter(t,e){this._filters.set(t,e)}removeFilter(t){return this._filters.delete(t)}getFilterSetting(t=""){return this._filters.get(t)}getFilterStyle(t=""){return function(t){return t?Object.keys(t).map((e=>`${e}(${t[e]}${"hue-rotate"===e?"deg":"blur"===e?"px":""})`)).join(" "):"none"}(this._filters.get(t))}applyFilter(t=`img[data-${this._dataAttribute}]`){document.querySelectorAll(t).forEach((t=>{const{dataset:e}=t;t.style.setProperty("filter",this.getFilterStyle(e[this._dataAttribute]))}))}getDataURL(t,r={}){return e(this,void 0,void 0,(function*(){s(t);const e=yield this.getBlob(t,r);if(!e)return null;const n=new FileReader;return new Promise((t=>{n.addEventListener("load",(()=>{t(n.result)})),n.readAsDataURL(e)}))}))}getBlob(t,r={}){return e(this,void 0,void 0,(function*(){s(t);const{naturalWidth:e,naturalHeight:a}=t,o=this.getFilterStyle(t.dataset[this._dataAttribute]);if(n){const n=new OffscreenCanvas(e,a),s=yield createImageBitmap(t);return new Promise((t=>{const e=function(t){const e=`\n    const work = ${t.toString()};\n\n    addEventListener('message', async (...params) => {\n      const res = await work(...params);\n      postMessage(res);\n    });\n  `,r=URL.createObjectURL(new Blob([e],{type:"text/javascript"})),n=new Worker(r),{terminate:a}=n;return n.terminate=()=>{URL.revokeObjectURL(r),a.call(n)},n}(i);e.addEventListener("message",(({data:r})=>{t(r),e.terminate()})),e.postMessage({canvas:n,image:s,filterStyle:o,options:r},[n,s])}))}const c=document.createElement("canvas");c.width=e,c.height=a;const l=c.getContext("2d",{alpha:!1});if(!l)throw new Error("The 2d context canvas is not supported.");l.filter=o,l.drawImage(t,0,0);const{type:u,quality:d}=r;return new Promise((t=>c.toBlob((e=>t(e)),u,d)))}))}}c.DEFAULT_DATA_ATTRIBUTE=o,c.DEFAULT_FILTERS=r;const l=c,u=c;t.CCGram=l,t.CCgram=c,t.DEFAULT_DATA_ATTRIBUTE=o,t.DEFAULT_FILTERS=r,t.Filter=u,t.createFilter=function(t){return new u(t)},t.default=u,Object.defineProperty(t,"__esModule",{value:!0})}));

package/dist/types.d.ts

@@ -0,0 +1,14 @@
+/** constructor Options */
+export interface Options {
+    /** The default data attribute */
+    dataAttribute?: string;
+    /** is Init CSS filter to all targets */
+    init?: boolean;
+}
+/** The parse options for canvas */
+export interface ParseOptions {
+    /** MIME types, defaults to `image/png` */
+    type?: string;
+    /** [0 - 1], defaults to `0.92` */
+    quality?: number;
+}

package/dist/utils.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="offscreencanvas" />
+import { FilterSetting } from './filters';
+import { ParseOptions } from './types';
+export declare const hasOffscreenCanvas: boolean;
+export declare function assert<TCond = unknown>(condition: TCond, message?: string): asserts condition;
+export declare function assertIsImage(image: HTMLImageElement): asserts image is HTMLImageElement;
+export declare function createWorker<TData = unknown, TMessage = unknown>(fn: (messageEvent: MessageEvent<TData>) => TMessage): Worker;
+/**
+ * Parse setting to style string
+ * @param setting - The filter setting
+ */
+export declare function parseSettingToStyle(setting?: FilterSetting): string;
+interface CreateBlobOptions<TCanvas extends HTMLCanvasElement | OffscreenCanvas = HTMLCanvasElement> {
+    canvas: TCanvas;
+    image: CanvasImageSource;
+    filterStyle: string;
+    options: ParseOptions;
+}
+export declare function createBlobWorker({ data, }: MessageEvent<CreateBlobOptions<OffscreenCanvas>>): Promise<Blob | null>;
+export {};

package/package.json

@@ -1,25 +1,19 @@
 {
   "name": "cc-gram",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "description": "🖼 A CSS & Canvas Instagram filters based on CSSgram",
-  "main": "dist/index.js",
-  "types": "dist/types/index.d.ts",
+  "type": "module",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "import": "./dist/index.esm.js",
+    "require": "./dist/index.umd.js"
+  },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
-  "scripts": {
-    "type-check": "tsc --noEmit",
-    "build:types": "tsc --emitDeclarationOnly",
-    "build:js": "webpack -p",
-    "build:js:dev": "webpack -d",
-    "build": "yarn build:types && yarn build:js",
-    "test": "jest __tests__/",
-    "lint": "eslint --fix --ignore-path .gitignore --ext .js,.ts src/",
-    "release:patch": "sh bin/release.sh patch",
-    "release:minor": "sh bin/release.sh minor",
-    "release:major": "sh bin/release.sh major",
-    "deploy": "sh bin/deploy.sh"
-  },
   "keywords": [
     "image",
     "filter",
@@ -37,36 +31,43 @@
     "url": "https://github.com/EastSun5566/cc-gram"
   },
   "homepage": "https://eastsun5566.github.io/cc-gram/",
+  "bugs": {
+    "url": "https://github.com/EastSun5566/cc-gram/issues"
+  },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn lint"
+      "pre-commit": "pnpm lint"
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.4.3",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
-    "@babel/plugin-transform-runtime": "^7.4.4",
-    "@babel/preset-env": "^7.4.3",
-    "@babel/preset-typescript": "^7.3.3",
-    "@types/jest": "^24.0.24",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.1.0",
+    "@rollup/plugin-typescript": "^9.0.2",
+    "@types/offscreencanvas": "^2019.7.0",
     "@typescript-eslint/eslint-plugin": "^2.14.0",
     "@typescript-eslint/parser": "^2.14.0",
+    "@vitest/coverage-c8": "^0.25.6",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.5",
-    "canvas": "^2.4.1",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-plugin-import": "^2.19.1",
-    "fork-ts-checker-webpack-plugin": "^3.1.1",
     "husky": "^3.1.0",
-    "jest": "^24.7.1",
-    "ts-jest": "^24.0.2",
-    "typescript": "^3.7.4",
-    "webpack": "^4.30.0",
-    "webpack-cli": "^3.3.0"
+    "jsdom": "^20.0.3",
+    "rimraf": "^3.0.2",
+    "rollup": "^3.2.5",
+    "rollup-plugin-filesize": "^9.1.2",
+    "tslib": "^2.4.1",
+    "typescript": "^4.8.4",
+    "vitest": "^0.25.6"
   },
-  "dependencies": {
-    "@babel/runtime": "^7.4.4"
+  "scripts": {
+    "preinstall": "npx only-allow pnpm",
+    "build": "rimraf dist && rollup -c rollup.config.ts --configPlugin typescript",
+    "type-check": "tsc --noEmit",
+    "test": "vitest __tests__",
+    "test:coverage": "vitest run __tests__ --coverage",
+    "lint": "eslint --fix --ignore-path .gitignore --ext .js,.ts src",
+    "release": "sh scripts/release.sh",
+    "demo:dev": "pnpm -C demo dev"
   }
-}
+}

package/src/core.ts

@@ -0,0 +1,188 @@
+import {
+  DEFAULT_FILTERS,
+  FilterName,
+  FilterSetting,
+} from './filters';
+import {
+  parseSettingToStyle,
+  hasOffscreenCanvas,
+  assertIsImage,
+  createWorker,
+  createBlobWorker,
+} from './utils';
+
+import { Options, ParseOptions } from './types';
+
+export const DEFAULT_DATA_ATTRIBUTE = 'filter';
+
+/** 🖼 A CSS & Canvas Instagram filters based on CSSgram */
+export class CCgram {
+  static readonly DEFAULT_DATA_ATTRIBUTE = DEFAULT_DATA_ATTRIBUTE;
+
+  static readonly DEFAULT_FILTERS = DEFAULT_FILTERS;
+
+  /** filter list */
+  protected readonly _filters = DEFAULT_FILTERS;
+
+  /** data attribute */
+  protected _dataAttribute: string;
+
+  /** Initialize CSS filter to all targets */
+  constructor({
+    dataAttribute = DEFAULT_DATA_ATTRIBUTE,
+    init = true,
+  }: Options = {}) {
+    this._dataAttribute = dataAttribute;
+
+    if (!init) return;
+
+    if (document.readyState === 'complete') {
+      this.applyFilter();
+      return;
+    }
+
+    const handleLoaded = (): void => {
+      this.applyFilter();
+      document.removeEventListener('DOMContentLoaded', handleLoaded);
+    };
+    document.addEventListener('DOMContentLoaded', handleLoaded);
+  }
+
+  /** The filter name list */
+  get filterNames(): FilterName[] {
+    return [...this._filters.keys()];
+  }
+
+  /**
+   * Add/Set filter
+   * @param name - the Filter name
+   * @param setting - the Filter setting
+   */
+  setFilter(name: FilterName, setting: FilterSetting): void {
+    this._filters.set(name, setting);
+  }
+
+  /**
+   * Remove filter
+   * @param name - the Filter name
+   */
+  removeFilter(name: FilterName): boolean {
+    return this._filters.delete(name);
+  }
+
+  /**
+   * Get setting object of filter
+   * @param [name=''] - The filter name
+   */
+  getFilterSetting(name: FilterName = ''): FilterSetting | void {
+    return this._filters.get(name);
+  }
+
+  /**
+   * Get the CSS inline style string of filter
+   * @param [name=''] - The filter name
+   */
+  getFilterStyle(name: FilterName = ''): string {
+    const setting = this._filters.get(name);
+
+    return parseSettingToStyle(setting);
+  }
+
+  /**
+   * Apply CSS filter to all targets
+   * @param [selectors='img[data-${this._dataAttribute}]'] - selectors
+   */
+  applyFilter(selectors = `img[data-${this._dataAttribute}]`): void {
+    document
+      .querySelectorAll<HTMLImageElement>(selectors)
+      .forEach((target): void => {
+        const { dataset } = target;
+        target.style.setProperty('filter', this.getFilterStyle(dataset[this._dataAttribute]));
+      });
+  }
+
+  /**
+   * Get the data URL of image element
+   * @param image - image element
+   * @param [options] - options
+   */
+  async getDataURL(
+    image: HTMLImageElement,
+    options: ParseOptions = {},
+  ): Promise<string | null> {
+    assertIsImage(image);
+
+    // don't use canvas.toDataURL, use blob to DataURL
+    const blob = await this.getBlob(image, options);
+    if (!blob) return null;
+
+    const reader = new FileReader();
+
+    return new Promise((resolve) => {
+      reader.addEventListener('load', () => {
+        resolve(reader.result as string);
+      });
+
+      reader.readAsDataURL(blob);
+    });
+  }
+
+  /**
+   * Get the blob of image element
+   * @param image - image element
+   * @param [options={}] - parse options
+   */
+  async getBlob(
+    image: HTMLImageElement,
+    options: ParseOptions = {},
+  ): Promise<Blob | null> {
+    assertIsImage(image);
+
+    const { naturalWidth, naturalHeight } = image;
+    const filterStyle = this.getFilterStyle(image.dataset[this._dataAttribute]);
+
+    if (hasOffscreenCanvas) {
+      const canvas = new OffscreenCanvas(naturalWidth, naturalHeight);
+      const bmp = await createImageBitmap(image);
+
+      return new Promise((resolve) => {
+        const worker = createWorker(createBlobWorker);
+
+        worker.addEventListener('message', ({ data }: MessageEvent<Blob>) => {
+          resolve(data);
+          worker.terminate();
+        });
+
+        worker.postMessage({
+          canvas,
+          image: bmp,
+          filterStyle,
+          options,
+        }, [canvas, bmp]);
+      });
+    }
+
+    const canvas = document.createElement('canvas');
+    canvas.width = naturalWidth;
+    canvas.height = naturalHeight;
+
+    const ctx = canvas.getContext('2d', { alpha: false });
+    if (!ctx) throw new Error('The 2d context canvas is not supported.');
+
+    ctx.filter = filterStyle;
+    ctx.drawImage(image, 0, 0);
+
+    const { type, quality } = options;
+    return new Promise((resolve) => canvas.toBlob((blob): void => resolve(blob), type, quality));
+  }
+}
+
+/** old Name, alias for `CCgram` */
+export const CCGram = CCgram;
+/** alias for `CCgram` */
+export const Filter = CCgram;
+
+export type FilterInstance = InstanceType<typeof CCgram>;
+export function createFilter(options: Options): FilterInstance {
+  return new Filter(options);
+}

package/src/filters.ts

@@ -0,0 +1,219 @@
+/**
+ * Base on CSSgram by Una Kravets
+ * @see CSSgram {@link https://github.com/una/CSSgram}
+ */
+
+/** The Name of Filter */
+export type FilterName = string;
+
+/** The Setting object of Filter */
+export interface FilterSetting {
+  blur?: number;
+  brightness?: number;
+  contrast?: number;
+  grayscale?: number;
+  'hue-rotate'?: number;
+  invert?: number;
+  saturate?: number;
+  sepia?: number;
+  [key: string]: number | undefined;
+}
+
+/** The default Filter List */
+export const DEFAULT_FILTERS: Map<FilterName, FilterSetting> = new Map([
+  [
+    'aden',
+    {
+      'hue-rotate': -20,
+      contrast: 0.9,
+      brightness: 1.2,
+      saturate: 0.85,
+    },
+  ],
+  [
+    'inkwell',
+    {
+      sepia: 0.3,
+      contrast: 1.1,
+      brightness: 1.1,
+      grayscale: 1,
+    },
+  ],
+  [
+    'reyes',
+    {
+      sepia: 0.22,
+      contrast: 0.85,
+      brightness: 1.1,
+      saturate: 0.75,
+    },
+  ],
+  [
+    'gingham',
+    {
+      'hue-rotate': -10,
+      brightness: 1.05,
+    },
+  ],
+  [
+    'toaster',
+    {
+      contrast: 1.5,
+      brightness: 0.9,
+    },
+  ],
+  [
+    'walden',
+    {
+      'hue-rotate': -10,
+      brightness: 1.1,
+      sepia: 0.3,
+      saturate: 1.6,
+    },
+  ],
+  [
+    'hudson',
+    {
+      brightness: 1.2,
+      contrast: 0.9,
+      saturate: 1.1,
+    },
+  ],
+  [
+    'earlybird',
+    {
+      contrast: 0.9,
+      sepia: 0.2,
+    },
+  ],
+  [
+    'mayfair',
+    {
+      contrast: 1.1,
+      saturate: 1.1,
+    },
+  ],
+  [
+    'lofi',
+    {
+      contrast: 1.5,
+      saturate: 1.1,
+    },
+  ],
+  [
+    '1977',
+    {
+      contrast: 1.1,
+      brightness: 1.1,
+      saturate: 1.3,
+    },
+  ],
+  [
+    'brooklyn',
+    {
+      contrast: 0.9,
+      brightness: 1.1,
+    },
+  ],
+  [
+    'xpro2',
+    {
+      sepia: 0.3,
+    },
+  ],
+  [
+    'nashville',
+    {
+      contrast: 1.2,
+      brightness: 1.05,
+      saturate: 1.2,
+      sepia: 0.2,
+    },
+  ],
+  [
+    'lark',
+    {
+      contrast: 0.9,
+    },
+  ],
+  [
+    'moon',
+    {
+      brightness: 1.1,
+      contrast: 1.1,
+      grayscale: 1,
+    },
+  ],
+  [
+    'clarendon',
+    {
+      contrast: 1.2,
+      saturate: 1.35,
+    },
+  ],
+  [
+    'willow',
+    {
+      contrast: 0.95,
+      brightness: 0.9,
+      grayscale: 0.5,
+    },
+  ],
+  [
+    'rise',
+    {
+      contrast: 0.9,
+      brightness: 1.05,
+      sepia: 0.2,
+      saturate: 0.9,
+    },
+  ],
+  [
+    'slumber',
+    {
+      brightness: 1.05,
+      saturate: 0.66,
+    },
+  ],
+  [
+    'brannan',
+    {
+      contrast: 1.4,
+      sepia: 0.5,
+    },
+  ],
+  [
+    'valencia',
+    {
+      contrast: 1.08,
+      brightness: 1.08,
+      sepia: 0.08,
+    },
+  ],
+  [
+    'maven',
+    {
+      contrast: 0.95,
+      brightness: 1.95,
+      saturate: 1.5,
+      sepia: 0.25,
+    },
+  ],
+  [
+    'stinson',
+    {
+      contrast: 0.75,
+      brightness: 1.15,
+      saturate: 0.85,
+    },
+  ],
+  [
+    'amaro',
+    {
+      'hue-rotate': -10,
+      contrast: 0.9,
+      brightness: 1.1,
+      saturate: 1.5,
+    },
+  ],
+]);

package/src/index.ts

@@ -0,0 +1,12 @@
+/**
+ * @package cc-gram <https://github.com/EastSun5566/cc-gram>
+ *
+ * @license MIT
+ * @copyright (c) 2019 - present
+ * @author 汪東陽 EastSun5566 <https://github.com/EastSun5566>
+ */
+
+export { Filter as default } from './core';
+
+export * from './filters';
+export * from './core';

package/src/types.ts

@@ -0,0 +1,15 @@
+/** constructor Options */
+export interface Options {
+  /** The default data attribute */
+  dataAttribute?: string;
+  /** is Init CSS filter to all targets */
+  init?: boolean;
+}
+
+/** The parse options for canvas */
+export interface ParseOptions {
+  /** MIME types, defaults to `image/png` */
+  type?: string;
+  /** [0 - 1], defaults to `0.92` */
+  quality?: number;
+}

package/src/utils.ts

@@ -0,0 +1,85 @@
+import { FilterSetting } from './filters';
+import { ParseOptions } from './types';
+
+export const hasOffscreenCanvas = typeof OffscreenCanvas !== 'undefined';
+
+export function assert<TCond = unknown>(condition: TCond, message = 'internal error.'): asserts condition {
+  if (!condition) throw Error(`[CCgram] ${message}`);
+}
+
+export function assertIsImage(image: HTMLImageElement): asserts image is HTMLImageElement {
+  assert(image && image.tagName === 'IMG', 'The first argument is required and must be an <img> element.');
+  assert(image.src, 'The <img> element src attribute is empty.');
+}
+
+export function createWorker<
+  TData = unknown,
+  TMessage = unknown
+>(fn: (messageEvent: MessageEvent<TData>) => TMessage): Worker {
+  const code = `
+    const work = ${fn.toString()};
+
+    addEventListener('message', async (...params) => {
+      const res = await work(...params);
+      postMessage(res);
+    });
+  `;
+
+  const url = URL.createObjectURL(new Blob([code], { type: 'text/javascript' }));
+  const worker = new Worker(url);
+
+  const { terminate } = worker;
+  worker.terminate = (): void => {
+    URL.revokeObjectURL(url);
+    terminate.call(worker);
+  };
+
+  return worker;
+}
+
+/**
+ * Parse setting to style string
+ * @param setting - The filter setting
+ */
+export function parseSettingToStyle(setting?: FilterSetting): string {
+  if (!setting) return 'none';
+
+  return Object
+    .keys(setting)
+    .map((key): string => `${key}(${setting[key]}${
+      key === 'hue-rotate'
+        ? 'deg'
+        : key === 'blur'
+          ? 'px'
+          : ''
+    })`)
+    .join(' ');
+}
+
+interface CreateBlobOptions<
+  TCanvas extends HTMLCanvasElement | OffscreenCanvas = HTMLCanvasElement
+> {
+  canvas: TCanvas;
+  image: CanvasImageSource;
+  filterStyle: string;
+  options: ParseOptions;
+}
+
+export function createBlobWorker({
+  data,
+}: MessageEvent<CreateBlobOptions<OffscreenCanvas>>): Promise<Blob | null> {
+  const {
+    canvas,
+    image,
+    filterStyle,
+    options,
+  } = data;
+
+  const ctx = canvas.getContext('2d', { alpha: false });
+  if (!ctx) throw new Error('The 2d context canvas is not supported.');
+
+  ctx.filter = filterStyle;
+  ctx.drawImage(image, 0, 0);
+
+  return canvas.convertToBlob(options);
+}

package/dist/index.js

@@ -1 +0,0 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.CCGram=e():t.CCGram=e()}("undefined"!=typeof self?self:this,(function(){return function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=12)}([function(t,e,r){t.exports=r(11)},function(t,e){t.exports=function(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}},function(t,e){function r(t,e,r,n,o,i,a){try{var u=t[i](a),c=u.value}catch(t){return void r(t)}u.done?e(c):Promise.resolve(c).then(n,o)}t.exports=function(t){return function(){var e=this,n=arguments;return new Promise((function(o,i){var a=t.apply(e,n);function u(t){r(a,o,i,u,c,"next",t)}function c(t){r(a,o,i,u,c,"throw",t)}u(void 0)}))}}},function(t,e){t.exports=function(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}},function(t,e,r){var n=r(7),o=r(8),i=r(9),a=r(10);t.exports=function(t){return n(t)||o(t)||i(t)||a()}},function(t,e){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}},function(t,e){function r(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}t.exports=function(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),t}},function(t,e,r){var n=r(3);t.exports=function(t){if(Array.isArray(t))return n(t)}},function(t,e){t.exports=function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}},function(t,e,r){var n=r(3);t.exports=function(t,e){if(t){if("string"==typeof t)return n(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(t,e):void 0}}},function(t,e){t.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}},function(t,e,r){var n=function(t){"use strict";var e=Object.prototype,r=e.hasOwnProperty,n="function"==typeof Symbol?Symbol:{},o=n.iterator||"@@iterator",i=n.asyncIterator||"@@asyncIterator",a=n.toStringTag||"@@toStringTag";function u(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{u({},"")}catch(t){u=function(t,e,r){return t[e]=r}}function c(t,e,r,n){var o=e&&e.prototype instanceof l?e:l,i=Object.create(o.prototype),a=new L(n||[]);return i._invoke=function(t,e,r){var n="suspendedStart";return function(o,i){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===o)throw i;return j()}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var u=w(a,r);if(u){if(u===f)continue;return u}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var c=s(t,e,r);if("normal"===c.type){if(n=r.done?"completed":"suspendedYield",c.arg===f)continue;return{value:c.arg,done:r.done}}"throw"===c.type&&(n="completed",r.method="throw",r.arg=c.arg)}}}(t,r,a),i}function s(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=c;var f={};function l(){}function h(){}function p(){}var d={};d[o]=function(){return this};var y=Object.getPrototypeOf,v=y&&y(y(E([])));v&&v!==e&&r.call(v,o)&&(d=v);var g=p.prototype=l.prototype=Object.create(d);function m(t){["next","throw","return"].forEach((function(e){u(t,e,(function(t){return this._invoke(e,t)}))}))}function b(t,e){var n;this._invoke=function(o,i){function a(){return new e((function(n,a){!function n(o,i,a,u){var c=s(t[o],t,i);if("throw"!==c.type){var f=c.arg,l=f.value;return l&&"object"==typeof l&&r.call(l,"__await")?e.resolve(l.__await).then((function(t){n("next",t,a,u)}),(function(t){n("throw",t,a,u)})):e.resolve(l).then((function(t){f.value=t,a(f)}),(function(t){return n("throw",t,a,u)}))}u(c.arg)}(o,i,n,a)}))}return n=n?n.then(a,a):a()}}function w(t,e){var r=t.iterator[e.method];if(void 0===r){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,w(t,e),"throw"===e.method))return f;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return f}var n=s(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,f;var o=n.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,f):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,f)}function x(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function _(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function L(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(x,this),this.reset(!0)}function E(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var n=-1,i=function e(){for(;++n<t.length;)if(r.call(t,n))return e.value=t[n],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:j}}function j(){return{value:void 0,done:!0}}return h.prototype=g.constructor=p,p.constructor=h,h.displayName=u(p,a,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===h||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,p):(t.__proto__=p,u(t,a,"GeneratorFunction")),t.prototype=Object.create(g),t},t.awrap=function(t){return{__await:t}},m(b.prototype),b.prototype[i]=function(){return this},t.AsyncIterator=b,t.async=function(e,r,n,o,i){void 0===i&&(i=Promise);var a=new b(c(e,r,n,o),i);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},m(g),u(g,a,"Generator"),g[o]=function(){return this},g.toString=function(){return"[object Generator]"},t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=E,L.prototype={constructor:L,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(_),!t)for(var e in this)"t"===e.charAt(0)&&r.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function n(r,n){return a.type="throw",a.arg=t,e.next=r,n&&(e.method="next",e.arg=void 0),!!n}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var u=r.call(i,"catchLoc"),c=r.call(i,"finallyLoc");if(u&&c){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(u){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return n(i.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,f):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),f},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),_(r),f}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;_(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:E(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),f}},t}(t.exports);try{regeneratorRuntime=n}catch(t){Function("r","regeneratorRuntime = r")(n)}},function(t,e,r){"use strict";r.r(e),r.d(e,"CCGram",(function(){return g}));var n=r(4),o=r.n(n),i=r(0),a=r.n(i),u=r(2),c=r.n(u),s=r(5),f=r.n(s),l=r(6),h=r.n(l),p=r(1),d=r.n(p),y=new Map([["aden",{"hue-rotate":-20,contrast:.9,brightness:1.2,saturate:.85}],["inkwell",{sepia:.3,contrast:1.1,brightness:1.1,grayscale:1}],["reyes",{sepia:.22,contrast:.85,brightness:1.1,saturate:.75}],["gingham",{"hue-rotate":-10,brightness:1.05}],["toaster",{contrast:1.5,brightness:.9}],["walden",{"hue-rotate":-10,brightness:1.1,sepia:.3,saturate:1.6}],["hudson",{brightness:1.2,contrast:.9,saturate:1.1}],["earlybird",{contrast:.9,sepia:.2}],["mayfair",{contrast:1.1,saturate:1.1}],["lofi",{contrast:1.5,saturate:1.1}],["1977",{contrast:1.1,brightness:1.1,saturate:1.3}],["brooklyn",{contrast:.9,brightness:1.1}],["xpro2",{sepia:.3}],["nashville",{contrast:1.2,brightness:1.05,saturate:1.2,sepia:.2}],["lark",{contrast:.9}],["moon",{brightness:1.1,contrast:1.1,grayscale:1}],["clarendon",{contrast:1.2,saturate:1.35}],["willow",{contrast:.95,brightness:.9,grayscale:.5}],["rise",{contrast:.9,brightness:1.05,sepia:.2,saturate:.9}],["slumber",{brightness:1.05,saturate:.66}],["brannan",{contrast:1.4,sepia:.5}],["valencia",{contrast:1.08,brightness:1.08,sepia:.08}],["maven",{contrast:.95,brightness:1.95,saturate:1.5,sepia:.25}],["stinson",{contrast:.75,brightness:1.15,saturate:.85}],["amaro",{"hue-rotate":-10,contrast:.9,brightness:1.1,saturate:1.5}]]),v=function(t){return t?Object.keys(t).map((function(e){return"".concat(e,"(").concat(t[e]).concat("hue-rotate"===e?"deg":"blur"===e?"px":"",")")})).join(" "):"none"},g=function(){function t(){var e=this,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=r.dataAttribute,o=void 0===n?t.DEFAULT_DATA_ATTRIBUTE:n,i=r.init,a=void 0===i||i;if(f()(this,t),d()(this,"_filters",y),d()(this,"_dataAttribute",void 0),this._dataAttribute=o,a)if("complete"!==document.readyState){var u=function t(){e.applyFilter(),document.removeEventListener("DOMContentLoaded",t)};document.addEventListener("DOMContentLoaded",u)}else this.applyFilter()}var e,r;return h()(t,[{key:"setFilter",value:function(t,e){this._filters.set(t,e)}},{key:"removeFilter",value:function(t){return this._filters.delete(t)}},{key:"getFilterSetting",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return this._filters.get(t)}},{key:"getFilterStyle",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=this._filters.get(t);return v(e)}},{key:"applyFilter",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"img[data-".concat(this._dataAttribute,"]");document.querySelectorAll(e).forEach((function(e){var r=e.dataset;e.style.filter=t.getFilterStyle(r[t._dataAttribute])}))}},{key:"_getImageCanvas",value:function(t){if(!t||"IMG"!==t.tagName)throw new Error("The first argument is required and must be an <img> element.");if(!t.src)throw new Error("The <img> element src attribute is empty.");return function(t,e){return new Promise((function(r,n){var o=t.naturalWidth,i=t.naturalHeight,a=document.createElement("canvas");a.width=o,a.height=i;var u=a.getContext("2d",{alpha:!1});return u?(u.filter=e,u.drawImage(t,0,0),r(a)):n(new Error("The 2d context canvas is not supported."))}))}(t,this.getFilterStyle(t.dataset[this._dataAttribute]))}},{key:"getDataURL",value:(r=c()(a.a.mark((function t(e){var r,n,o,i,u=arguments;return a.a.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return r=u.length>1&&void 0!==u[1]?u[1]:{},n=r.type,o=r.quality,t.next=3,this._getImageCanvas(e);case 3:return i=t.sent,t.abrupt("return",i.toDataURL(n,o));case 5:case"end":return t.stop()}}),t,this)}))),function(t){return r.apply(this,arguments)})},{key:"getBlob",value:(e=c()(a.a.mark((function t(e){var r,n,o,i,u=arguments;return a.a.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return r=u.length>1&&void 0!==u[1]?u[1]:{},n=r.type,o=r.quality,t.next=3,this._getImageCanvas(e);case 3:return i=t.sent,t.abrupt("return",new Promise((function(t){i.toBlob((function(e){return t(e)}),n,o)})));case 5:case"end":return t.stop()}}),t,this)}))),function(t){return e.apply(this,arguments)})},{key:"filterNames",get:function(){return o()(this._filters.keys())}}]),t}();d()(g,"DEFAULT_DATA_ATTRIBUTE","filter");e.default=g}])}));

package/dist/types/index.d.ts

@@ -1,79 +0,0 @@
-/**
- * @package cc-gram <https://github.com/EastSun5566/cc-gram>
- *
- * @license MIT
- * @copyright (c) 2019 - present
- * @author 汪東陽 EastSun5566 <https://github.com/EastSun5566>
- */
-import { FilterName, FilterSetting } from './filters';
-/** The options for canvas */
-interface Options {
-    /** MIME types, default is `image/png` */
-    type?: string;
-    /** [0 - 1], default is `0.92` */
-    quality?: number;
-}
-/** Initial Config */
-interface Config {
-    /** The default data attribute */
-    dataAttribute?: string;
-    /** is Init CSS filter to all targets */
-    init?: boolean;
-}
-/** 🖼 A CSS & Canvas Instagram filters based on CSSgram */
-export declare class CCGram {
-    /** default option */
-    static readonly DEFAULT_DATA_ATTRIBUTE = "filter";
-    /** filter list */
-    protected readonly _filters: Map<string, FilterSetting>;
-    /** data attribute */
-    protected _dataAttribute: string;
-    /** Initialize CSS filter to all targets */
-    constructor({ dataAttribute, init, }?: Config);
-    /** The filter name list */
-    get filterNames(): FilterName[];
-    /**
-     * Add/Set filter
-     * @param {FilterName} name - the Filter name
-     * @param {FilterSetting} setting - the Filter setting
-     */
-    setFilter(name: FilterName, setting: FilterSetting): void;
-    /**
-     * Remove filter
-     * @param {FilterName} name - the Filter name
-     */
-    removeFilter(name: FilterName): boolean;
-    /**
-     * Get setting of filter
-     * @param {FilterName} [name=''] - The filter name
-     */
-    getFilterSetting(name?: FilterName): FilterSetting | void;
-    /**
-     * Get the CSS inline style of filter
-     * @param {FilterName} [name=''] - The filter name
-     */
-    getFilterStyle(name?: FilterName): string;
-    /**
-     * Apply CSS filter to all targets
-     * @param {string} [selectors='img[data-${this._dataAttribute}]'] - selectors
-     */
-    applyFilter(selectors?: string): void;
-    /**
-     * Create canvas of image element
-     * @param {HTMLImageElement} image
-     */
-    protected _getImageCanvas(image: HTMLImageElement): Promise<HTMLCanvasElement>;
-    /**
-     * Get the data URL of image element
-     * @param {HTMLImageElement} image - image element
-     * @param {Options} [options={}] - options
-     */
-    getDataURL(image: HTMLImageElement, { type, quality }?: Options): Promise<string>;
-    /**
-     * Get the blob of image element
-     * @param {HTMLImageElement} image - image element
-     * @param {Options} [options={}] - options
-     */
-    getBlob(image: HTMLImageElement, { type, quality }?: Options): Promise<Blob | null>;
-}
-export default CCGram;

package/dist/types/utils.d.ts

@@ -1,12 +0,0 @@
-import { FilterSetting } from './filters';
-/**
- * Parse setting to style
- * @param {FilterSetting} setting - The filter setting
- */
-export declare const parseSettingToStyle: (setting?: FilterSetting | undefined) => string;
-/**
- * Create filter image canvas
- * @param {HTMLImageElement} image - The image
- * @param {string} filterStyle - The filter style
- */
-export declare const createFilterImageCanvas: (image: HTMLImageElement, filterStyle: string) => Promise<HTMLCanvasElement>;