cc-gram 1.1.0 → 1.2.3

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - present 汪東陽 EastSun5566
+Copyright (c) 2019 - present Michael Wang
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,22 +1,27 @@
-# CCgram
+<img src="./logo.webp" alt="CCgram Logo" width="180">
+
+# 🖼 CCgram
 
 [![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)
+[![JSR Version](https://img.shields.io/jsr/v/%40eastsun5566/cc-gram?style=for-the-badge)](https://jsr.io/@eastsun5566/cc-gram)
 [![Test Status](https://img.shields.io/github/actions/workflow/status/EastSun5566/cc-gram/test.yml?style=for-the-badge)](https://github.com/EastSun5566/cc-gram/actions/workflows/test.yml)
-[![License](https://img.shields.io/github/license/EastSun5566/cc-gram.svg?style=for-the-badge)](https://github.com/EastSun5566/cc-gram/blob/master/LICENSE)
+[![License](https://img.shields.io/github/license/EastSun5566/cc-gram.svg?style=for-the-badge)](https://github.com/EastSun5566/cc-gram/blob/main/LICENSE)
+
+[<img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" height="40">](https://www.buymeacoffee.com/eastsun5566)
 
-> 🖼 A CSS & Canvas Instagram filters based on CSSgram
+> A CSS & Canvas Instagram filter inspired by CSSgram
 
 🔗 <https://eastsun5566.github.io/cc-gram/>
 
 ![Demo GIF](./demo.gif)
 
-## 🤔 The Why
+## 🤔 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.
+> [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: Uses CSS to preview & draw with Canvas API on demand.
-- Non-Blocking: Draw an image on Web Worker with `OffscreenCanvas` & `ImageBitmap`.
+- 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
 
@@ -142,7 +147,7 @@ filter.removeFilter("my-filter");
 
 ---
 
-### Access Filter image
+### Access image with filter
 
 ```js
 const image = document.querySelector('img[data-filter="1977"]');
@@ -170,7 +175,21 @@ const blob = await filter.getBlob(image, {
 - Options
 
   - type: `string` - MIME types, defaults to `image/png`,
-  - quality: `number`- [0 - 1], defaults to `0.92`
+  - 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:
+
+```js
+// 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
 

package/dist/core.d.ts

@@ -9,6 +9,8 @@ export declare class CCgram {
     protected readonly _filters: Map<string, FilterSetting>;
     /** data attribute */
     protected _dataAttribute: string;
+    /** data attribute key in camelCase for dataset access */
+    protected _dataAttributeKey: string;
     /** Initialize CSS filter to all targets */
     constructor({ dataAttribute, init, }?: Options);
     /** The filter name list */

package/dist/index.d.ts

@@ -3,7 +3,7 @@
  *
  * @license MIT
  * @copyright (c) 2019 - present
- * @author 汪東陽 EastSun5566 <https://github.com/EastSun5566>
+ * @author Michael Wang
  */
 export { Filter as default } from './core';
 export * from './filters';

package/dist/index.esm.js

@@ -1 +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};
+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,this._dataAttributeKey=t.replace(/-./g,(t=>t[1]?t[1].toUpperCase():"")),!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._dataAttributeKey]))}))}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={}){var i;return t(this,void 0,void 0,(function*(){a(e);const{naturalWidth:t,naturalHeight:o}=e,c=null!==(i=n.filter)&&void 0!==i?i:e.dataset[this._dataAttributeKey],l=this.getFilterStyle(c);if(r){const r=new OffscreenCanvas(t,o),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:l,options:n},[r,a])}))}const u=document.createElement("canvas");u.width=t,u.height=o;const d=u.getContext("2d",{alpha:!1});if(!d)throw new Error("The 2d context canvas is not supported.");d.filter=l,d.drawImage(e,0,0);const{type:h,quality:g}=n;return new Promise((t=>u.toBlob((e=>t(e)),h,g)))}))}}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

@@ -1 +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})}));
+!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,this._dataAttributeKey=t.replace(/-./g,(t=>t[1]?t[1].toUpperCase():"")),!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._dataAttributeKey]))}))}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={}){var a;return e(this,void 0,void 0,(function*(){s(t);const{naturalWidth:e,naturalHeight:o}=t,c=null!==(a=r.filter)&&void 0!==a?a:t.dataset[this._dataAttributeKey],l=this.getFilterStyle(c);if(n){const n=new OffscreenCanvas(e,o),a=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:a,filterStyle:l,options:r},[n,a])}))}const u=document.createElement("canvas");u.width=e,u.height=o;const d=u.getContext("2d",{alpha:!1});if(!d)throw new Error("The 2d context canvas is not supported.");d.filter=l,d.drawImage(t,0,0);const{type:h,quality:f}=r;return new Promise((t=>u.toBlob((e=>t(e)),h,f)))}))}}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

@@ -11,4 +11,6 @@ export interface ParseOptions {
     type?: string;
     /** [0 - 1], defaults to `0.92` */
     quality?: number;
+    /** Override filter name, defaults to reading from data attribute */
+    filter?: string;
 }

package/dist/utils.d.ts

@@ -2,6 +2,7 @@
 import { FilterSetting } from './filters';
 import { ParseOptions } from './types';
 export declare const hasOffscreenCanvas: boolean;
+export declare function camelize(string: string): string;
 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;

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "cc-gram",
-  "version": "1.1.0",
+  "version": "1.2.3",
   "description": "🖼 A CSS & Canvas Instagram filters based on CSSgram",
   "type": "module",
+  "engines": {
+    "node": "^18.0.0 || >=20.0.0"
+  },
+  "packageManager": "pnpm@9.1.0",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -14,6 +18,16 @@
     "dist",
     "src"
   ],
+  "scripts": {
+    "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",
+    "prepublishOnly": "pnpm build",
+    "release": "sh scripts/release.sh",
+    "demo:dev": "pnpm -C demo dev"
+  },
   "keywords": [
     "image",
     "filter",
@@ -24,7 +38,7 @@
     "instagram",
     "cssgram"
   ],
-  "author": "汪東陽 EastSun5566",
+  "author": "Michael Wang 汪東陽 <michael19920327@gmail.com> (https://github.com/EastSun5566)",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -59,14 +73,5 @@
     "tslib": "^2.4.1",
     "typescript": "^4.8.4",
     "vitest": "^0.25.6"
-  },
-  "scripts": {
-    "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

@@ -9,6 +9,7 @@ import {
   assertIsImage,
   createWorker,
   createBlobWorker,
+  camelize,
 } from './utils';
 
 import { Options, ParseOptions } from './types';
@@ -27,12 +28,16 @@ export class CCgram {
   /** data attribute */
   protected _dataAttribute: string;
 
+  /** data attribute key in camelCase for dataset access */
+  protected _dataAttributeKey: string;
+
   /** Initialize CSS filter to all targets */
   constructor({
     dataAttribute = DEFAULT_DATA_ATTRIBUTE,
     init = true,
   }: Options = {}) {
     this._dataAttribute = dataAttribute;
+    this._dataAttributeKey = camelize(dataAttribute);
 
     if (!init) return;
 
@@ -92,12 +97,13 @@ export class CCgram {
    * Apply CSS filter to all targets
    * @param [selectors='img[data-${this._dataAttribute}]'] - selectors
    */
-  applyFilter(selectors = `img[data-${this._dataAttribute}]`): void {
+  // eslint-disable-next-line @typescript-eslint/no-inferrable-types
+  applyFilter(selectors: string = `img[data-${this._dataAttribute}]`): void {
     document
       .querySelectorAll<HTMLImageElement>(selectors)
       .forEach((target): void => {
         const { dataset } = target;
-        target.style.setProperty('filter', this.getFilterStyle(dataset[this._dataAttribute]));
+        target.style.setProperty('filter', this.getFilterStyle(dataset[this._dataAttributeKey]));
       });
   }
 
@@ -139,7 +145,8 @@ export class CCgram {
     assertIsImage(image);
 
     const { naturalWidth, naturalHeight } = image;
-    const filterStyle = this.getFilterStyle(image.dataset[this._dataAttribute]);
+    const filterName = options.filter ?? image.dataset[this._dataAttributeKey];
+    const filterStyle = this.getFilterStyle(filterName);
 
     if (hasOffscreenCanvas) {
       const canvas = new OffscreenCanvas(naturalWidth, naturalHeight);

package/src/index.ts

@@ -3,7 +3,7 @@
  *
  * @license MIT
  * @copyright (c) 2019 - present
- * @author 汪東陽 EastSun5566 <https://github.com/EastSun5566>
+ * @author Michael Wang
  */
 
 export { Filter as default } from './core';

package/src/types.ts

@@ -12,4 +12,6 @@ export interface ParseOptions {
   type?: string;
   /** [0 - 1], defaults to `0.92` */
   quality?: number;
+  /** Override filter name, defaults to reading from data attribute */
+  filter?: string;
 }

package/src/utils.ts

@@ -3,6 +3,10 @@ import { ParseOptions } from './types';
 
 export const hasOffscreenCanvas = typeof OffscreenCanvas !== 'undefined';
 
+export function camelize(string: string): string {
+  return string.replace(/-./g, (c) => (c[1] ? c[1].toUpperCase() : ''));
+}
+
 export function assert<TCond = unknown>(condition: TCond, message = 'internal error.'): asserts condition {
   if (!condition) throw Error(`[CCgram] ${message}`);
 }