{"id":19250479,"url":"https://github.com/srgobi/canvacard","last_synced_at":"2025-04-13T06:41:49.146Z","repository":{"id":57193663,"uuid":"366966543","full_name":"SrGobi/canvacard","owner":"SrGobi","description":"👨‍🎓 Módulo de manipulación de imágenes simple y fácil de usar para principiantes.📸","archived":false,"fork":false,"pushed_at":"2025-02-24T12:26:20.000Z","size":413270,"stargazers_count":26,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T23:08:39.326Z","etag":null,"topics":["arts","canvacard","canvacord","canvas","captcha-canvas","discord","discord-canvas","hacktoberfest","image-manipulation","node-canvas","nodejs","rank-card","rankcard","react-component-to-image","welcome-card","welcome-card-discord"],"latest_commit_sha":null,"homepage":"https://canvacard.srgobi.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SrGobi.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-13T07:15:47.000Z","updated_at":"2025-02-24T12:26:26.000Z","dependencies_parsed_at":"2024-11-05T11:35:21.502Z","dependency_job_id":"e6df1558-a10c-4172-b518-3d0af157c75b","html_url":"https://github.com/SrGobi/canvacard","commit_stats":{"total_commits":1,"total_committers":1,"mean_commits":1.0,"dds":0.0,"last_synced_commit":"db2cffb2fa52cc7cbdc871124b155862ed1407d0"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SrGobi%2Fcanvacard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SrGobi%2Fcanvacard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SrGobi%2Fcanvacard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SrGobi%2Fcanvacard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SrGobi","download_url":"https://codeload.github.com/SrGobi/canvacard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248675434,"owners_count":21143763,"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":["arts","canvacard","canvacord","canvas","captcha-canvas","discord","discord-canvas","hacktoberfest","image-manipulation","node-canvas","nodejs","rank-card","rankcard","react-component-to-image","welcome-card","welcome-card-discord"],"created_at":"2024-11-09T18:17:46.907Z","updated_at":"2025-04-13T06:41:49.140Z","avatar_url":"https://github.com/SrGobi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Fira+Code\u0026weight=500\u0026size=40\u0026pause=1000\u0026color=5865F2\u0026multiline=true\u0026random=false\u0026width=435\u0026lines=Canvacard)](#)\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://github.com/SrGobi/canvacard\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/SrGobi/canvacard/refs/heads/test/banner_Canvacard.png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003ca href=\"https://nodei.co/npm/canvacard/\"\u003e\u003cimg src=\"https://nodei.co/npm/canvacard.png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/canvacard?style=for-the-badge\"\u003e \u003cimg src=\"https://img.shields.io/npm/dm/canvacard?style=for-the-badge\"\u003e \u003cimg src='https://img.shields.io/bundlephobia/minzip/canvacard?label=size\u0026style=for-the-badge' alt='size' /\u003e \u003cimg src=\"https://img.shields.io/npm/l/hercai?style=for-the-badge\"\u003e \u003cimg src=\"https://img.shields.io/npm/dt/canvacard?style=for-the-badge\"\u003e \u003ca href=\"https://discord.gg/cqrN3Eg\" target=\"_blank\"\u003e \u003cimg alt=\"Discord\" src=\"https://img.shields.io/badge/Support-Click%20here-7289d9?style=for-the-badge\u0026logo=discord\"\u003e \u003c/a\u003e \u003c/p\u003e\n\n\n## [![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Fira+Code\u0026weight=500\u0026pause=1000\u0026color=F20000\u0026random=false\u0026width=435\u0026lines=%E2%9D%94How+To+Install%3F)](#)\n\n```console\nnpm i canvacard\n```\n\n# [![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Fira+Code\u0026weight=500\u0026pause=1000\u0026\u0026color=00EDFF\u0026random=false\u0026width=435\u0026lines=%F0%9F%8E%AF+Describing)](#)\n\nFor **CommonJS**\n```javascript\nconst canvacard = require(\"canvacard\");\n```\n\nFor **EsModule** And **TypeScript**\n```typescript\nimport canvacard from \"canvacard\";\n```\n\n# ✨Features\n\n- 🪟 **Open source and no privacy concerns, fully transparent** - Canvacard is open source and free. You can contribute and you don't have to worry about privacy.\n\n- 💪 **Easy to use** - Canvacard offers an intuitive and easy API to efficiently generate images, perfect for developers of all levels.\n\n- 🚀 **Speed ​​and optimization** - The libraries it uses are highly optimized, offering exceptional performance when creating images.\n\n- 🔒 **Typescript support** - Canvacard is built in Typescript, which allows for the use of type definitions and improves the developer experience.\n\n- 🎨 **More than 50 customization options** - You have access to many tools to completely adjust and modify your images or cards.\n\n- 🖼️ **Creating interactive and personalized cards** - Canvacard is perfect for creating custom cards for Discord, adding graphics, banners, badges, and more.\n\n- 🛠️ **Object Oriented Design** - Canvacard is built with an object-oriented programming approach, making it easy to reuse and create complex cards.\n\n- 🤓 **Ideal for beginners** - The API and documentation are simple, making it accessible even to those with little experience handling images.\n\n- 🔡 **Register fonts** - Not only can you use the fonts from your machine, if you also use it for a server you can register the fonts you want!\n\nFor **CommonJS**\n```javascript\nconst { registerFont } = require(\"canvacard\");\n\n// Path to source file and alias\nconst fontPath = \"./path/to/font.ttf\";\nconst fontName = \"CustomFont\";\n\nregisterFont(fontPath, fontName);\n\nconsole.log(`Fuente ${fontName} registrada exitosamente.`);\n```\n\nFor **EsModule** And **TypeScript**\n```typescript\nimport { registerFont } from \"canvacard\";\n\n// Define types for clarity\nconst fontPath: string = \"./path/to/font.ttf\";\nconst fontName: string = \"CustomFont\";\n\nregisterFont(fontPath, fontName);\n\nconsole.log(`Fuente ${fontName} registrada exitosamente.`);\n```\n\n# 📦Examples\n\n## [Rank Card](https://canvacard.srgobi.com/classes/rank)\n\n```js\nconst { AttachmentBuilder } = require(\"discord.js\");\nconst canvacard = require(\"canvacard\");\nconst userData = getDataSomehow(); // Simulates obtaining user data\n\nconst rank = new canvacard.Rank()\n  .setAvatar(userData.avatarURL, userData.avatar_decoration_data.asset, false)\n  .setBanner(userData.bannerURL, true)\n  .setBadges(userData.flags, userData.bot, true)\n  .setBorder([\"#22274a\", \"#001eff\"], \"vertical\")\n  .setCurrentXP(userData.xp)\n  .setRequiredXP(userData.requiredXP)\n  .setRank(1, \"RANK\", true)\n  .setLevel(20, \"LEVEL\")\n  .setStatus(\"online\")\n  .setProgressBar([\"#14C49E\", \"#FF0000\"], \"GRADIENT\", true)\n  .setUsername(userData.username, userData.discriminator, \"#FFFFFF\")\n  .setCreatedTimestamp(userData.createdTimestamp);\n\nrank.build(\"Cascadia Code PL\")\n  .then(data =\u003e {\n    // Use AttachmentBuilder to upload the file\n    const attachment = new AttachmentBuilder(data, { name: \"RankCard.png\" });\n    message.channel.send({ content: \"Here is your rank card:\", files: [attachment] });\n  })\n  .catch(err =\u003e console.error(\"Error creating rank card:\", err));\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003ePREVIEW\u003c/summary\u003e\n\u003cbr\u003e\n  \u003ca\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/SrGobi/canvacard/refs/heads/test/rank_1.png\" alt=\"Rank Card Preview 1\"\u003e\n  \u003c/a\u003e\n  \u003ca\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/SrGobi/canvacard/refs/heads/test/rank_2.png\" alt=\"Rank Card Preview 2\"\u003e\n  \u003c/a\u003e\n  \u003ca\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/SrGobi/canvacard/refs/heads/test/rank_3.png\" alt=\"Rank Card Preview 3\"\u003e\n  \u003c/a\u003e\n  \u003ca\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/SrGobi/canvacard/refs/heads/test/rank_4.png\" alt=\"Rank Card Preview 4\"\u003e\n  \u003c/a\u003e\n  \u003ca\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/SrGobi/canvacard/refs/heads/test/rank_5.png\" alt=\"Rank Card Preview 5\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n## [Welcome / Leave Card](https://canvacard.srgobi.com/classes/welcomeleave)\n\n```js\nconst canvacard = require(\"canvacard\");\nconst img = \"https://cdn.discordapp.com/embed/avatars/0.png\";\nconst background = \"https://i.imgur.com/5O7xmVe.png\";\n\nconst welcomer = new canvacard.WelcomeLeave()\n  .setAvatar(img)\n  .setBackground('COLOR', '#000000')\n  .setTitulo(\"Card Title 👋\", '#FFFFFF')\n  .setSubtitulo(\"Card Caption 👋\", '#FFFFFF')\n  .setOpacityOverlay(1)\n  .setColorCircle('#FFFFFF')\n  .setColorOverlay('#5865F2')\n  .setTypeOverlay('ROUNDED');\n\nwelcomer.build(\"Cascadia Code PL, Noto Color Emoji\")\n  .then(data =\u003e {\n    // Use AttachmentBuilder to upload the file\n    const attachment = new AttachmentBuilder(data, { name: \"WelcomeCard.png\" });\n    message.channel.send({ content: \"Here is your welcome card:\", files: [attachment] });\n  })\n  .catch(err =\u003e console.error(\"Error creating welcome card:\", err));\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003ePREVIEW\u003c/summary\u003e\n\u003cbr\u003e\n  \u003ca\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/SrGobi/canvacard/refs/heads/test/welcome_1.png\" alt=\"Welcome Card Preview 1\"\u003e\n  \u003c/a\u003e\n  \u003ca\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/SrGobi/canvacard/refs/heads/test/welcome_2.png\" alt=\"Welcome Card Preview 2\"\u003e\n  \u003c/a\u003e\n  \u003ca\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/SrGobi/canvacard/refs/heads/test/welcome_3.png\" alt=\"Welcome Card Preview 3\"\u003e\n  \u003c/a\u003e\n  \u003ca\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/SrGobi/canvacard/refs/heads/test/welcome_4.png\" alt=\"Welcome Card Preview 4\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n## [Spotify Card](https://canvacard.srgobi.com/classes/spotify)\n\n```js\nconst canvacard = require(\"canvacard\");\n\nconst spotify = new canvacard.Spotify()\n  .setAuthor(\"SAIKO\")\n  .setAlbum(\"SAKURA 👋\")\n  .setStartTimestamp(Date.now() - 10000)\n  .setEndTimestamp(Date.now() + 50000)\n  .setImage(\"https://i.scdn.co/image/ab67616d00001e02e346fc6f767ca2ac8365fe60\")\n  .setTitle(\"YO LO SOÑÉ\");\n\nspotify.build(\"Cascadia Code PL, Noto Color Emoji\")\n  .then(data =\u003e {\n    // Use AttachmentBuilder to upload the file\n    const attachment = new AttachmentBuilder(data, { name: \"SpotifyCard.png\" });\n    message.channel.send({ content: \"Here is your spotify card:\", files: [attachment] });\n  })\n  .catch(err =\u003e console.error(\"Error creating spotify card:\", err));\n```\n\n\u003cimg src=\"https://raw.githubusercontent.com/SrGobi/canvacard/refs/heads/test/spotify.png\" alt=\"Spotify Card Preview\"\u003e\n\n## [Canvacard Circle](https://canvacard.srgobi.com/classes/canvacard)\n\n```js\nconst canvacard = require(\"canvacard\");\n\ncanvacard.Canvas.circle(data.avatarURL)\n.then(data =\u003e {\n  canvacard.write(data, \"circle.png\");\n})\n.catch(console.error);\n```\n\n\u003cimg src=\"https://raw.githubusercontent.com/SrGobi/canvacard/refs/heads/test/images/circle.png\" alt=\"Circle Preview\"\u003e\n\n## [Otros ejemplos](https://canvacard.srgobi.com)\n\n```js\nconst { Client, GatewayIntentBits, AttachmentBuilder } = require(\"discord.js\");\nconst canvacard = require(\"canvacard\");\n\nconst client = new Client({\n    intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMessages, GatewayIntentBits.MessageContent]\n});\n\nclient.on('ready', () =\u003e {\n  console.log('¡I am online!');\n});\n\nclient.on('messageCreate', async (message) =\u003e {\n  if (message.author.bot) return;\n\n  if (message.content === '!triggered') {\n    try {\n      let avatar = message.author.displayAvatarURL({ dynamic: false, format: 'png' });\n      let image = await canvacard.Canvas.trigger(avatar);\n      // Enviar el archivo generado usando AttachmentBuilder\n      let attachment = new AttachmentBuilder(image, { name: 'triggered.gif' });\n      await message.channel.send({ content: 'Here is your \"triggered\" image!', files: [attachment] });\n    } catch (err) {\n      console.error('Error generating image triggered:', err);\n    }\n  }\n});\n\nclient.login('Your_Bot_Token_Here');\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003ePREVIEW\u003c/summary\u003e\n\u003cbr\u003e\n  \u003ca\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/SrGobi/canvacard/refs/heads/test/fortnite_shop.png\" alt=\"Fortnite Shop\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrgobi%2Fcanvacard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrgobi%2Fcanvacard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrgobi%2Fcanvacard/lists"}