{"_id":"@9am/img-halftone","_rev":"3-928953b2d0740799ebe246ecca705cf6","name":"@9am/img-halftone","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@9am/img-halftone","version":"1.0.0","description":"A web component turns into halftone.","keywords":["img","halftone","cmyk","web component","custom element","canvas"],"type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","main":"./dist/index.umd.js","exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.umd.js","default":"./dist/index.es.js"}},"scripts":{"dev":"vite","build":"vite build"},"devDependencies":{"@9am/tsconfig":"^1.0.0","postcss":"^8.4.24","postcss-nesting":"^12.0.0","prettier":"^2.8.8","typescript":"^5.1.6","vite":"^4.3.9","vite-plugin-banner":"^0.7.0","vite-plugin-dts":"^3.0.3"},"author":{"name":"9am","email":"tech.9am@gmail.com","url":"https://9am.github.io/"},"repository":{"type":"git","url":"git+https://github.com/9am/img-halftone.git"},"homepage":"https://github.com/9am/halftone#readme","private":false,"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"license":"MIT","gitHead":"6f1b7d1569e71fb5355a9919e44059dc590527a2","bugs":{"url":"https://github.com/9am/img-halftone/issues"},"_id":"@9am/img-halftone@1.0.0","_nodeVersion":"16.8.0","_npmVersion":"7.21.0","dist":{"integrity":"sha512-csLJkB52klNaiAGwIRjxKL1dyjAg5LYMnCD2fMe3vVbU7/ULeil/SI142lZ2IlySvpY4k5nxzzAHf6j1Cenv5w==","shasum":"0defbf06d9483ed59305260910be83a99988307e","tarball":"https://registry.npmjs.org/@9am/img-halftone/-/img-halftone-1.0.0.tgz","fileCount":12,"unpackedSize":27695,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwjUaSaK5oW6W4BZ8xYh8VInfK2wf++v0+Kcqo/9aueAIhAPIjlLQwUWmzX+3YhNdCW9m7W47pMwyTaLb8r52t+rO7"}]},"_npmUser":{"name":"9am","email":"gbgogb@gmail.com"},"directories":{},"maintainers":[{"name":"9am","email":"gbgogb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/img-halftone_1.0.0_1690969463500_0.40804973877317297"},"_hasShrinkwrap":false},"1.0.1":{"name":"@9am/img-halftone","version":"1.0.1","description":"A web component turns into halftone.","keywords":["img","halftone","cmyk","web component","custom element","canvas"],"type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","main":"./dist/index.umd.js","exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.umd.js","default":"./dist/index.es.js"}},"scripts":{"dev":"vite","build":"vite build"},"devDependencies":{"@9am/tsconfig":"^1.0.0","postcss":"^8.4.24","postcss-nesting":"^12.0.0","prettier":"^2.8.8","typescript":"^5.1.6","vite":"^4.3.9","vite-plugin-banner":"^0.7.0","vite-plugin-dts":"^3.0.3"},"author":{"name":"9am","email":"tech.9am@gmail.com","url":"https://9am.github.io/"},"repository":{"type":"git","url":"git+https://github.com/9am/img-halftone.git"},"homepage":"https://github.com/9am/halftone#readme","private":false,"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"license":"MIT","gitHead":"8f463ad1d541d25b56ff26655e884ee60a7c949d","bugs":{"url":"https://github.com/9am/img-halftone/issues"},"_id":"@9am/img-halftone@1.0.1","_nodeVersion":"16.8.0","_npmVersion":"7.21.0","dist":{"integrity":"sha512-H1ZfRcFY+fkPTg8IgxAzgs2Yc4dsaoYSYZ1a2wi/ZBVU3CkmVLOL1ozaf//UctZ0XPHdN7OzmmplAD7NIcoKgA==","shasum":"31dc1c9c592525922470ae84c386dc48b68a9d7a","tarball":"https://registry.npmjs.org/@9am/img-halftone/-/img-halftone-1.0.1.tgz","fileCount":12,"unpackedSize":30526,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCF3S5MudmYxWtiMgqew1odvVPqY0FQFX8/4iHc6p7/LAIhAK6rM5pYSvPOxxfexazuJFwaHMsVtxljCAeert4nwjF/"}]},"_npmUser":{"name":"9am","email":"gbgogb@gmail.com"},"directories":{},"maintainers":[{"name":"9am","email":"gbgogb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/img-halftone_1.0.1_1691041219565_0.022046158333578925"},"_hasShrinkwrap":false},"1.0.2":{"name":"@9am/img-halftone","version":"1.0.2","description":"A web component turns into halftone.","keywords":["img","halftone","cmyk","web component","custom element","canvas"],"type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","main":"./dist/index.umd.js","exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.umd.js","default":"./dist/index.es.js"}},"scripts":{"dev":"vite","build":"vite build"},"devDependencies":{"@9am/tsconfig":"^1.0.0","postcss":"^8.4.24","postcss-nesting":"^12.0.0","prettier":"^2.8.8","typescript":"^5.1.6","vite":"^4.3.9","vite-plugin-banner":"^0.7.0","vite-plugin-dts":"^3.0.3"},"author":{"name":"9am","email":"tech.9am@gmail.com","url":"https://9am.github.io/"},"repository":{"type":"git","url":"git+https://github.com/9am/img-halftone.git"},"homepage":"https://github.com/9am/halftone#readme","private":false,"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"license":"MIT","gitHead":"5c4965cdac6c298129cb14f7a1279ecbcf271a21","bugs":{"url":"https://github.com/9am/img-halftone/issues"},"_id":"@9am/img-halftone@1.0.2","_nodeVersion":"16.8.0","_npmVersion":"7.21.0","dist":{"integrity":"sha512-pc4C/QiO7OqfwVYHOTZKbZvep35cN5o39GqzexvC0b09yMeOjbV4gAt2FeBZpeyacuEdsGoq1NZogHxchSwTOg==","shasum":"5de16e1e391fa1e248a15361cb2978c29574cf26","tarball":"https://registry.npmjs.org/@9am/img-halftone/-/img-halftone-1.0.2.tgz","fileCount":12,"unpackedSize":30994,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBVCp2cPXIREaukWCMCdXr+56iULTuA9G6MqX92z3EcuAiEAt415q4lb9pCJnrvqO7ZfvrKk0qJGdiUrIg90fPERYog="}]},"_npmUser":{"name":"9am","email":"gbgogb@gmail.com"},"directories":{},"maintainers":[{"name":"9am","email":"gbgogb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/img-halftone_1.0.2_1691125447797_0.7324370243881007"},"_hasShrinkwrap":false},"1.0.3":{"name":"@9am/img-halftone","version":"1.0.3","description":"A web component turns into halftone.","keywords":["img","halftone","cmyk","web component","custom element","canvas"],"type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","main":"./dist/index.umd.js","exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.umd.js","default":"./dist/index.es.js"}},"scripts":{"dev":"vite","build":"vite build"},"devDependencies":{"@9am/tsconfig":"^1.0.0","postcss":"^8.4.24","postcss-nesting":"^12.0.0","prettier":"^2.8.8","typescript":"^5.1.6","vite":"^4.3.9","vite-plugin-banner":"^0.7.0","vite-plugin-dts":"^3.0.3"},"author":{"name":"9am","email":"tech.9am@gmail.com","url":"https://9am.github.io/"},"repository":{"type":"git","url":"git+https://github.com/9am/img-halftone.git"},"homepage":"https://github.com/9am/halftone#readme","private":false,"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"license":"MIT","gitHead":"4db2f2f9d0adda11d6bdd6ebc9e789cffa4ed701","bugs":{"url":"https://github.com/9am/img-halftone/issues"},"_id":"@9am/img-halftone@1.0.3","_nodeVersion":"16.8.0","_npmVersion":"7.21.0","dist":{"integrity":"sha512-TQiZskqmeI2Ibz3vhb3m4jNKfy9Tl9Hmg5JxBL98DWWroZIg1POOf3qkd7kTQMlPumEkBHtc7vr0Ykjad4Tchw==","shasum":"f02459dfb2f8b7b03ed8115dfdced84cf3da1455","tarball":"https://registry.npmjs.org/@9am/img-halftone/-/img-halftone-1.0.3.tgz","fileCount":12,"unpackedSize":33533,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgL3Ue/odxzvvd8FPgkmLhXB8/7joHvzKE72C0Cl0ZKgIhAMoUQdvEWKQ2KcHLGY34xagFAj95G9BJjheSiK0iRAmD"}]},"_npmUser":{"name":"9am","email":"gbgogb@gmail.com"},"directories":{},"maintainers":[{"name":"9am","email":"gbgogb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/img-halftone_1.0.3_1691125955800_0.1341936659399301"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-02T09:44:23.422Z","1.0.0":"2023-08-02T09:44:23.710Z","modified":"2023-08-04T05:12:36.070Z","1.0.1":"2023-08-03T05:40:19.732Z","1.0.2":"2023-08-04T05:04:07.995Z","1.0.3":"2023-08-04T05:12:35.958Z"},"maintainers":[{"name":"9am","email":"gbgogb@gmail.com"}],"description":"A web component turns into halftone.","homepage":"https://github.com/9am/halftone#readme","keywords":["img","halftone","cmyk","web component","custom element","canvas"],"repository":{"type":"git","url":"git+https://github.com/9am/img-halftone.git"},"author":{"name":"9am","email":"tech.9am@gmail.com","url":"https://9am.github.io/"},"bugs":{"url":"https://github.com/9am/img-halftone/issues"},"license":"MIT","readme":"
\n\t\"img-tissue\"\n\t

<img-halftone>

\n\t

A web component turns <img> into halftone.🥑

\n

\n \n \"GitHub\"\n \n \n \"npm\"\n \n \n \"npm\"\n \n \n \"npm\n \n

\n
\n\n## Features\n- 🎨 Print halftone image with **CMYK**.\n- ⚙️ Halftone is performed in **web worker**.\n- 📜 Render with **Canvas** or **HTML element**.\n- 🧩 Various **dot shapes** supported.\n- 🔖 **Alt** support for **Accessibility**.\n- 🛎 A **loading** className on the host.\n- 💽 **≈ 3kB** minzipped.\n\n## Demo\n\n|Description|Live demo|\n|:---------:|:-------:|\n|Default setting with a zoom-in-out animation|[**codepen**](https://codepen.io/9am/pen/jOQdrmX)|\n|Render with different `varient`|[**codepen**](https://codepen.io/9am/pen/vYQbaRJ)|\n|Render with different `cellsize`|[**codepen**](https://codepen.io/9am/pen/OJadweB)|\n|Render with different `shape`|[**codepen**](https://codepen.io/9am/pen/YzRBOKY)|\n|Concurrent processing|[**codepen**](https://codepen.io/9am/pen/XWyOBjL)|\n\n\n## Usage\n\n#### Install\n\n```sh\nnpm install @9am/img-halftone\n```\n\n```js\nimport '@9am/img-halftone'\n```\n\n#### Or use a CDN link\n\n```html\n\n```\n\n```html\n\n```\n\n#### HTML\n\n```html\n\n```\n\n## Documentation\n\n### <img-halftone> attributes\n\n|Name|Type|Default|Description|\n|:--:|:--:|:-----:|:----------|\n|`src`|{string}|**Required**|The image URL|\n|`alt`|{string}|img-halftone|The alternative text description|\n|`varient`|{canvas \\| grid}|canvas|The Render type
*(Notice: using 'grid' with small cellsize will cause layout performance problem.)*|\n|`cellsize`|{number}|4|The cell size for each dot in pixel|\n|`shape`|{circle \\| triangle \\| rectangle \\| hexagon }|circle|The shape of dots|\n\n## License\n[MIT](LICENSE)\n","readmeFilename":"README.md"}