From 608841224c7dd29fdbacdddbbac863ec40881b08 Mon Sep 17 00:00:00 2001 From: flameface Date: Fri, 19 Jan 2024 21:36:36 +0530 Subject: [PATCH] cropify 1.0.0 --- .gitignore | 1 + index.d.ts | 12 ++++ index.js | 40 +++++++++++ package-lock.json | 174 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 32 +++++++++ readme.md | 49 +++++++++++++ 6 files changed, 308 insertions(+) create mode 100644 .gitignore create mode 100644 index.d.ts create mode 100644 index.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 readme.md diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000..15791f5 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,12 @@ +interface cropOption { + imagePath: string, + x: number, + y: number, + width: number, + height: number, + borderRadius?: number +} + +declare function cropImage(options: cropOption): Promise; + +export { cropImage } \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..88c98ee --- /dev/null +++ b/index.js @@ -0,0 +1,40 @@ +const { createCanvas, loadImage } = require('@napi-rs/canvas'); + +async function cropImage({ + imagePath, + x, + y, + width, + height, + borderRadius = 0 +}) { + try { + const image = await loadImage(imagePath); + + const canvas = createCanvas(width, height); + const ctx = canvas.getContext('2d'); + + if (borderRadius > 0) { + ctx.beginPath(); + ctx.moveTo(borderRadius, 0); + ctx.lineTo(width - borderRadius, 0); + ctx.quadraticCurveTo(width, 0, width, borderRadius); + ctx.lineTo(width, height - borderRadius); + ctx.quadraticCurveTo(width, height, width - borderRadius, height); + ctx.lineTo(borderRadius, height); + ctx.quadraticCurveTo(0, height, 0, height - borderRadius); + ctx.lineTo(0, borderRadius); + ctx.quadraticCurveTo(0, 0, borderRadius, 0); + ctx.closePath(); + ctx.clip(); + } + + ctx.drawImage(image, x, y, width, height, 0, 0, width, height); + + return canvas.toBuffer('image/png'); + } catch (error) { + console.error('Error cropping image:', error.message); + } +} + +module.exports = { cropImage }; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..4b4a818 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,174 @@ +{ + "name": "cropify", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "cropify", + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "@napi-rs/canvas": "^0.1.44" + } + }, + "node_modules/@napi-rs/canvas": { + "version": "0.1.44", + "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.44.tgz", + "integrity": "sha512-IyhSndjw29LR1WqkUZvTJI4j8Ve1QGbZYtpdQjJjcFvsvJS4/WHzOWV8ZciLPJBhrYvSQf/JbZJy5LHmFV+plg==", + "engines": { + "node": ">= 10" + }, + "optionalDependencies": { + "@napi-rs/canvas-android-arm64": "0.1.44", + "@napi-rs/canvas-darwin-arm64": "0.1.44", + "@napi-rs/canvas-darwin-x64": "0.1.44", + "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.44", + "@napi-rs/canvas-linux-arm64-gnu": "0.1.44", + "@napi-rs/canvas-linux-arm64-musl": "0.1.44", + "@napi-rs/canvas-linux-x64-gnu": "0.1.44", + "@napi-rs/canvas-linux-x64-musl": "0.1.44", + "@napi-rs/canvas-win32-x64-msvc": "0.1.44" + } + }, + "node_modules/@napi-rs/canvas-android-arm64": { + "version": "0.1.44", + "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.44.tgz", + "integrity": "sha512-3UDlVf1CnibdUcM0+0xPH4L4/d/tCI895or0y7mr/Xlaa1tDmvcQCvBYl9G54IpXsm+e4T1XkVrGGJD4k1NfSg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@napi-rs/canvas-darwin-arm64": { + "version": "0.1.44", + "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.44.tgz", + "integrity": "sha512-Y1Yx0H45Iicx2b6pcrlICjlwgylLtqi0t5OJgeUXnxLcJ1+aEpmjLr16tddqHkmGUw/nBRAwfPJrf3GaOwWowQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@napi-rs/canvas-darwin-x64": { + "version": "0.1.44", + "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.44.tgz", + "integrity": "sha512-gbzeNz13DFH0Ak5ENyQ5ZEuSuCjNDxA/OV9P5f19lywbOVL5Ol+qgKX0BXBcP3O3IXWahruOvmmLUBn9h1MHpA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": { + "version": "0.1.44", + "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.44.tgz", + "integrity": "sha512-Sad3/eGyzTZiyJFeFrmX1M3aRp0n3qTAXeCm6EeAjCFGk8TWd4cINCGT3IRY4wmCvNnpe6C4fM03K07cU5YYwA==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@napi-rs/canvas-linux-arm64-gnu": { + "version": "0.1.44", + "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.44.tgz", + "integrity": "sha512-bCrI9naYGPRFHePMGN+wlrWzC+Swi6uc1YzFg4/wOYzHKSte8FXHrGspHOPPr12BCEmgg3yXK8nnLjxGdlAWtg==", + "cpu": [ + "arm64" + ], + "hasInstallScript": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@napi-rs/canvas-linux-arm64-musl": { + "version": "0.1.44", + "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.44.tgz", + "integrity": "sha512-gB/ao9zBQaOJik4arOKJisZaG+v7DuyBW7UdG+0L80msAuJTTH2UgWOnmXfZwPxzxNbFKzOa8r48uVzfTaAHGQ==", + "cpu": [ + "arm64" + ], + "hasInstallScript": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@napi-rs/canvas-linux-x64-gnu": { + "version": "0.1.44", + "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.44.tgz", + "integrity": "sha512-pvHy1bJ0DDD4Bsx6yuFnqpIyBW7+2iIK5BpvmL36zXE+7w2MEeaYzLUWTBhrXj8rzHys6MwLmHNlkw65R80YbQ==", + "cpu": [ + "x64" + ], + "hasInstallScript": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@napi-rs/canvas-linux-x64-musl": { + "version": "0.1.44", + "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.44.tgz", + "integrity": "sha512-5QaeYqNZ/u1QI2E/UqvnmuORT6cI1qTtLosPp/y4awaK+/LXQEzotHNv0nan0z4EV/0mXsJswY9JpISRJzx+Kw==", + "cpu": [ + "x64" + ], + "hasInstallScript": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@napi-rs/canvas-win32-x64-msvc": { + "version": "0.1.44", + "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.44.tgz", + "integrity": "sha512-pbeTGLox+I+sMVl/FFO21Xvp0PhijsuEr9gaynmN2X7FPTg+CCuuBDhfSU5iMAtcCCYFCk8ridZIWy5jkcf72w==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..22da7dc --- /dev/null +++ b/package.json @@ -0,0 +1,32 @@ +{ + "name": "cropify", + "types": "./index.d.ts", + "description": "Crop and round image corners seamlessly.", + "version": "1.0.0", + "main": "index.js", + "publishConfig": { + "access": "public", + "registry": "https://registry.npmjs.org" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "MIT", + "dependencies": { + "@napi-rs/canvas": "^0.1.44" + }, + "devDependencies": {}, + "repository": { + "type": "git", + "url": "https://github.com/unburn/cropify.git" + }, + "bugs": { + "url": "https://github.com/unburn/cropify/issues" + }, + "funding": { + "type": "githubsponser", + "url": "https://github.com/sponsors/flameface" + } +} \ No newline at end of file diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..cade6e0 --- /dev/null +++ b/readme.md @@ -0,0 +1,49 @@ +## About +**Cropify** helps to crop and round image corners seamlessly. + +## Features +- Crop images with precision using the Canvas API. +- Optional support for rounding corners with a customizable border radius. +- Designed for simplicity and performance. + +## Installation +``` +npm install cropify +``` + +## Usage +```javascript +const { cropImage } = require("./index"); +const fs = require("fs") + +const imagePath = 'https://raw.githubusercontent.com/unburn/.github/main/assets/unburngithub.png'; + +const cropX = 600; +const cropY = 0; +const cropWidth = 722; +const cropHeight = 422; +const borderRadius = 20; + +cropImage({ + imagePath: imagePath, + x: cropX, + y: cropY, + width: cropWidth, + height: cropHeight, + borderRadius: borderRadius +}).then(x => { + fs.writeFileSync("cropped-image.png", x); +}); +``` + +## Output +### Original + +![original](https://raw.githubusercontent.com/unburn/.github/main/assets/unburngithub.png) + +### Cropped + +![crop](https://raw.githubusercontent.com/unburn/.github/main/assets/cropped-image.png) + +--- +If you need help or want some features to be added, join our official [discord](https://discord.com/invite/qDysF95NWh) community. \ No newline at end of file