{"id":18273411,"url":"https://github.com/blinet/canvas-helper","last_synced_at":"2025-04-05T02:31:17.574Z","repository":{"id":57151658,"uuid":"424642181","full_name":"blinet/canvas-helper","owner":"blinet","description":"Easy to edit image","archived":false,"fork":false,"pushed_at":"2022-11-11T18:40:06.000Z","size":16,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-20T21:20:49.474Z","etag":null,"topics":["canvas","canvas-helper","canvas-text-setting","image-editor","image-setting"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blinet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-04T15:18:33.000Z","updated_at":"2024-11-14T12:30:38.000Z","dependencies_parsed_at":"2023-01-22T19:45:35.655Z","dependency_job_id":null,"html_url":"https://github.com/blinet/canvas-helper","commit_stats":null,"previous_names":["naimabd/canvas-helper"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blinet%2Fcanvas-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blinet%2Fcanvas-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blinet%2Fcanvas-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blinet%2Fcanvas-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blinet","download_url":"https://codeload.github.com/blinet/canvas-helper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247279419,"owners_count":20912880,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","canvas-helper","canvas-text-setting","image-editor","image-setting"],"created_at":"2024-11-05T12:06:19.780Z","updated_at":"2025-04-05T02:31:17.220Z","avatar_url":"https://github.com/blinet.png","language":"JavaScript","funding_links":["https://paypal.me/arosteam?country.x=SA\u0026locale.x=ar_EG"],"categories":[],"sub_categories":[],"readme":"# Easy to edit image.\n\n\n  \u003cp\u003e\n \u003ca href=\"https://github.com/arosteam\"\u003e\u003cimg src=\"https://img.shields.io/static/v1?label=powered%20by\u0026message=Aros\u0026color=000636\u0026style=for-the-badge\u0026logo=Windows%20Terminal\u0026logoColor=fff\"/\u003e\u003c/a\u003e\n \u003ca href=\"https://www.npmjs.com/package/editor-canvas\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/editor-canvas.svg?style=for-the-badge\" alt=\"NPM version\" /\u003e\u003c/a\u003e\n \u003ca href=\"https://www.npmjs.com/package/editor-canvas\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/editor-canvas.svg?maxAge=3600\u0026style=for-the-badge\" alt=\"NPM downloads\" /\u003e\u003c/a\u003e\n \u003ca href=\"https://paypal.me/arosteam?country.x=SA\u0026locale.x=ar_EG\"\u003e\u003cimg src=\"https://img.shields.io/badge/-donate-blue.svg?logo=paypal\u0026style=for-the-badge\" alt=\"NPM downloads\" /\u003e\u003c/a\u003e\n\n  \u003c/p\u003e\n  \n  \n\n## Installation\n\n### Install **[editor-canvas](https://npmjs.com/package/editor-canvas)**\n\n```sh\n$ npm install editor-canvas\n```\n\n\n## Features\n\n- [Description.](#description) ✏️\n- [Resize Text.](#resizeText) 📄\n- [Split Text.](#splitText) 📝\n- [Draw Center](#drawCenter) 📍\n- [Circle Image.](#drawCircle) ⭕\n- [Curved Edge](#drawSquare) 🔲\n- [Draw Polygon](#drawPolygon) 📏\n- [Resize Image](#resizeImage) 🔧\n- [Other](#other) 🔗\n\n### What's new!!\n\n#### New function\n\n- [Crop Image](#cropImage) ✂️\n\n#### update image function(s)\n\n- image width/height will not change !\n- new parameter (Canvas) to easy to use.\n\n\n## Description\n\neditor canvas is a simple package help you to edit your image and text.\n(All example bellow is under discord, but you can use the function anywhere)\n\n\n## resizeText\n\nResize text to not go out canvas image.\n\n```javascript\nconst Discord = require(\"discord.js\");\nconst client = new Discord.Client({\n  intents: [\n    Intents.FLAGS.GUILDS,\n    Intents.FLAGS.GUILD_MESSAGES,\n  ],\n});\nconst Canvas = require(\"canvas\");\nconst editor = require(\"editor-canvas\");\n\nclient.on(\"messageCreate\", async (message) =\u003e {\n  var args = message.content.split(\" \");\n  if (args[0].toLowerCase() === \"write\") {\n    var canvas = Canvas.createCanvas(512, 512),\n      ctx = canvas.getContext(\"2d\");\n\n    var words = args.slice(1);\n    ctx.font = editor.resizeText(ctx, { text: words });\n    ctx.fillText(words, 100, 0);\n\n    message.channel.send({ files: [canvas.toBuffer()] });\n  }\n});\n```\n\n## splitText\n\nSplit text to not go out canvas image.\n\n```javascript\nconst Discord = require(\"discord.js\");\nconst client = new Discord.Client({\n  intents: [\n    Intents.FLAGS.GUILDS,\n    Intents.FLAGS.GUILD_MESSAGES,\n  ],\n});\nconst Canvas = require(\"canvas\");\nconst editor = require(\"editor-canvas\");\n\nclient.on(\"messageCreate\", async (message) =\u003e {\n  var args = message.content.split(\" \");\n  if (args[0].toLowerCase() === \"write\") {\n    var canvas = Canvas.createCanvas(512, 512),\n      ctx = canvas.getContext(\"2d\");\n\n    var words = args.slice(1);\n    ctx.font = \"20px \";\n    words = editor.splitText(ctx, { text: words });\n    ctx.fillText(words, 100, 0);\n\n    message.channel.send({ files: [canvas.toBuffer()] });\n  }\n});\n```\n\n## drawCenter\n\ndraw image in a specify center point\n\n```javascript\nconst Discord = require(\"discord.js\");\nconst client = new Discord.Client({\n  intents: [\n    Intents.FLAGS.GUILDS,\n    Intents.FLAGS.GUILD_MESSAGES,\n  ],\n});\nconst Canvas = require(\"canvas\");\nconst editor = require(\"editor-canvas\");\n\nclient.on(\"messageCreate\", async (message) =\u003e {\n  var args = message.content.split(\" \");\n  if (args[0].toLowerCase() === \"center\") {\n    var canvas = Canvas.createCanvas(512, 512),\n      ctx = canvas.getContext(\"2d\");\n\n    var avatar = message.author.displayAvatarURL({\n      dynamic: false,\n      format: \"jpg\",\n      size: 1024,\n    });\n\n    avatar = await editor.drawCircle({ image: avatar, Canvas });\n    editor.drawCenter(ctx, avatar, 200, 200, 100, 100);\n\n    message.channel.send({ files: [canvas.toBuffer()] });\n  }\n});\n```\n\n## drawCircle\n\nfrom an image to circle.\n\n```javascript\nconst Discord = require(\"discord.js\");\nconst client = new Discord.Client({\n  intents: [\n    Intents.FLAGS.GUILDS,\n    Intents.FLAGS.GUILD_MESSAGES,\n  ],\n});\nconst editor = require(\"editor-canvas\");\n\nclient.on(\"messageCreate\", async (message) =\u003e {\n  if (message.content === \"circle\") {\n    var avatar = message.author.displayAvatarURL({\n      dynamic: false,\n      format: \"jpg\",\n      size: 2048,\n    });\n\n    avatar = await editor.drawCircle({ image: avatar });\n\n    message.channel.send({ files: [avatar] });\n  }\n});\n```\n\n## drawSquare\n\nCurve the edge for image\n\n```javascript\nconst Discord = require(\"discord.js\");\nconst client = new Discord.Client({\n  intents: [\n    Intents.FLAGS.GUILDS,\n    Intents.FLAGS.GUILD_MESSAGES,\n  ],\n});\nconst editor = require(\"editor-canvas\");\n\nclient.on(\"messageCreate\", async (message) =\u003e {\n  if (message.content === \"curve\") {\n    var avatar = message.author.displayAvatarURL({\n      dynamic: false,\n      format: \"jpg\",\n      size: 1024,\n    });\n\n    avatar = await editor.drawSquare({ image: avatar });\n\n    message.channel.send({ files: [avatar] });\n  }\n});\n```\n\n## drawPolygon\n\nDraw any polygon with simple step\n\n```javascript\nconst Discord = require(\"discord.js\");\nconst client = new Discord.Client({\n  intents: [\n    Intents.FLAGS.GUILDS,\n    Intents.FLAGS.GUILD_MESSAGES,\n  ],\n});\nconst editor = require(\"editor-canvas\");\n\nclient.on(\"messageCreate\", async (message) =\u003e {\n  if (message.content === \"polygon\") {\n    var avatar = message.author.displayAvatarURL({\n      dynamic: false,\n      format: \"jpg\",\n      size: 1024,\n    });\n\n    avatar = await editor.drawPolygon({ image: avatar, angle: 10 });\n\n    message.channel.send({ files: [avatar] });\n  }\n});\n```\n\n## resizeImage\n\nResize your image with specific width \u0026 height\n\n```javascript\nconst Discord = require(\"discord.js\");\nconst client = new Discord.Client({\n  intents: [\n    Intents.FLAGS.GUILDS,\n    Intents.FLAGS.GUILD_MESSAGES,\n  ],\n});\nconst editor = require(\"editor-canvas\");\n\nclient.on(\"messageCreate\", async (message) =\u003e {\n  var [cmd, width, height] = message.content.trim().split(/ +/);\n  if (cmd === \"resize\") {\n    var avatar = message.author.displayAvatarURL({\n      dynamic: false,\n      format: \"jpg\",\n      size: 1024,\n    });\n\n    avatar = await editor.resizeImage({\n      image: avatar,\n      width: width,\n      height: height,\n    });\n\n    message.channel.send({ files: [avatar] });\n  }\n});\n```\n\n# New\n\n## cropImage\n\ncrop your image with specific coordinates\n\n```javascript\nconst Discord = require(\"discord.js\");\nconst client = new Discord.Client({\n  intents: [\n    Intents.FLAGS.GUILDS,\n    Intents.FLAGS.GUILD_MESSAGES,\n  ],\n});\nconst editor = require(\"editor-canvas\");\n\nclient.on(\"messageCreate\", async (message) =\u003e {\n  var [cmd, x, y, width, height] = message.content.trim().split(/ +/);\n  if (cmd === \"crop\") {\n    var avatar = message.author.displayAvatarURL({\n      dynamic: false,\n      format: \"jpg\",\n      size: 1024,\n    });\n\n    avatar = await editor.cropImage({\n      image: avatar,\n      x: x,\n      y: y,\n      width: width,\n      height: height,\n    });\n\n    message.channel.send({ files: [avatar] });\n  }\n});\n```\n\n# Other\n\nfunctions and its options.\n\n### resizeText\n\n\u003e ```javascript\n\u003e\n\u003e • (ctx, { text, width, font })\n\u003e\n\u003e text // specific text. (required)\n\u003e\n\u003e width // when text go out the spefic width  will resize. (optional)\n\u003e // width: 200\n\u003e\n\u003e font // text font to start with it. (optional)\n\u003e // font: 20\n\u003e\n\u003e ```\n\n### splitText\n\n\u003e ```javascript\n\u003e\n\u003e • (ctx, { text, width, maxLine })\n\u003e\n\u003e text // specific text. (required)\n\u003e\n\u003e width // when text go out the spefic width  will resize. (optional)\n\u003e // width: 200\n\u003e\n\u003e maxLine // max line reached when text is big. (optional)\n\u003e // maxLine: 2\n\u003e\n\u003e ```\n\n### drawCircle\n\n\u003e ```javascript\n\u003e\n\u003e • ({ image ,fill, stroke, weight, Canvas })\n\u003e\n\u003e image // specific image. (optional)\n\u003e\n\u003e fill // if don't want image , u can draw circle with specific color. (optional)\n\u003e // fill: \"BLACK\"\n\u003e\n\u003e stroke // draw a fram among image or circle, with specific color. (optional)\n\u003e // stroke: \"BLACK\"\n\u003e\n\u003e weight // fram width. (optional)\n\u003e //weight: 5\n\u003e\n\u003e Canvas // you can use the image in your canvas code without use \"loadImage\"\n\u003e // else will be a Buffer image\n\u003e\n\u003e ```\n\n### drawSquare\n\n\u003e ```javascript\n\u003e\n\u003e • ({ image, fill, stroke, weight, curve, Canvas })\n\u003e\n\u003e image // specific image. (optional)\n\u003e\n\u003e fill // if don't want image , u can draw circle with specific color. (optional)\n\u003e // fill: \"BLACK\"\n\u003e\n\u003e stroke // draw a fram among image or circle, with specific color. (optional)\n\u003e // stroke: \"BLACK\"\n\u003e\n\u003e weight // fram width. (optional)\n\u003e //weight: 5\n\u003e\n\u003e curve // curve the edge. (optional)\n\u003e //curve: 30\n\u003e\n\u003e Canvas // you can use the image in your canvas code without use \"loadImage\"\n\u003e // else will be a Buffer image\n\u003e\n\u003e ```\n\n### drawPolygon\n\n\u003e ```javascript\n\u003e\n\u003e • ({ image, fill, stroke, weight, angle })\n\u003e\n\u003e image // specific image. (optional)\n\u003e\n\u003e fill // if don't want image , u can draw circle with specific color. (optional)\n\u003e // fill: \"BLACK\"\n\u003e\n\u003e stroke // draw a fram among image or circle, with specific color. (optional)\n\u003e // stroke: \"BLACK\"\n\u003e\n\u003e weight // fram width. (optional)\n\u003e //weight: 5\n\u003e\n\u003e angle // count of polygon angle. (optional)\n\u003e //angle: 10\n\u003e\n\u003e Canvas // you can use the image in your canvas code without use \"loadImage\"\n\u003e // else will be a Buffer image\n\u003e\n\u003e ```\n\n### resizeImage\n\n\u003e ```javascript\n\u003e\n\u003e • ({ image, width, height, Canvas })\n\u003e\n\u003e image // specific image. (required)\n\u003e\n\u003e width // the new width for image. (optional)\n\u003e\n\u003e height // the new height for image. (optional)\n\u003e\n\u003e Canvas // you can use the image in your canvas code without use \"loadImage\"\n\u003e // else will be a Buffer image\n\u003e\n\u003e ```\n\n### cropImage\n\n\u003e ```javascript\n\u003e\n\u003e • ({ image, x, y, width, height, Canvas })\n\u003e\n\u003e image // specific image. (required)\n\u003e\n\u003e x // to crop from top\n\u003e\n\u003e y // to crop from left\n\u003e\n\u003e width // the width to crop\n\u003e\n\u003e height // the height to crop\n\u003e\n\u003e Canvas // you can use the image in your canvas code without use \"loadImage\"\n\u003e // else will be a Buffer image\n\u003e\n\u003e ```\n\n# Thanks for using it ❤️. [Support](https://discord.gg/maxSPHjvaw).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblinet%2Fcanvas-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblinet%2Fcanvas-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblinet%2Fcanvas-helper/lists"}