{"id":18913377,"url":"https://github.com/xg4/text2image","last_synced_at":"2025-04-15T08:30:48.263Z","repository":{"id":44142330,"uuid":"160603213","full_name":"xg4/text2image","owner":"xg4","description":":fax: A lightweight for convert text to image by canvas","archived":false,"fork":false,"pushed_at":"2023-10-18T05:46:03.000Z","size":773,"stargazers_count":12,"open_issues_count":7,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-28T18:50:39.994Z","etag":null,"topics":["canvas","image","lightweight","text","text2image"],"latest_commit_sha":null,"homepage":"https://text-image.vercel.app/","language":"TypeScript","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/xg4.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2018-12-06T01:51:59.000Z","updated_at":"2024-09-14T09:10:04.000Z","dependencies_parsed_at":"2022-09-03T11:32:18.001Z","dependency_job_id":null,"html_url":"https://github.com/xg4/text2image","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xg4%2Ftext2image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xg4%2Ftext2image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xg4%2Ftext2image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xg4%2Ftext2image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xg4","download_url":"https://codeload.github.com/xg4/text2image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249035286,"owners_count":21202047,"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","image","lightweight","text","text2image"],"created_at":"2024-11-08T10:06:57.949Z","updated_at":"2025-04-15T08:30:47.923Z","avatar_url":"https://github.com/xg4.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# text2image\n\n[![npm](https://img.shields.io/npm/v/@xg4/text2image.svg)](https://www.npmjs.com/package/@xg4/text2image)\n[![npm](https://img.shields.io/npm/l/@xg4/text2image.svg)](https://www.npmjs.com/package/@xg4/text2image)\n\n\u003e convert text to image by canvas\n\n## Installation\n\n### Install with npm or Yarn\n\n```sh\n# npm\nnpm i @xg4/text2image\n\n# yarn\nyarn add @xg4/text2image\n\n# pnpm\npnpm i @xg4/text2image\n```\n\n## Usage\n\n### Instance\n\n```js\nimport text2image, { Text2Image } from '@xg4/text2image'\n\n// use current options convert default options\ntext2image.setDefaultOptions({\n  // some options\n})\n\n// reset default options\ntext2image.resetDefaultOptions()\n\n// you can create new instance or use text2image singleton\nconst t2 = new Text2Image()\n// or\n// initialization default options\nconst t2 = new Text2Image({\n  fontSize: 13,\n  color: '#000000',\n  fontFamily: 'arial',\n  fontWeight: 'bold',\n  type: 'image/png',\n  quality: 0.92,\n})\n\n// use current options convert default options\nt2.setDefaultOptions({\n  // some options\n})\n\n// reset default options\nt2.resetDefaultOptions()\n```\n\n## Object URL\n\n### js/html\n\n```js\nasync function renderTextImage() {\n  const url = await text2image.createURL('hello world')\n  const img = new Image()\n  img.src = url\n  document.body.appendChild(img)\n}\n\nrenderTextImage()\n```\n\n### React\n\n```tsx\nimport { useEffect, useState } from 'react'\nimport text2image from '../../../src'\n\nexport default function App() {\n  const [images, setImages] = useState\u003cstring[]\u003e([])\n\n  useEffect(() =\u003e {\n    async function renderTextImage() {\n      const url = await text2image.createURL('Hello World')\n      setImages((urls) =\u003e [...urls, url])\n    }\n\n    renderTextImage()\n  }, [])\n\n  return (\n    \u003cdiv\u003e\n      {images.map((url, index) =\u003e (\n        \u003cimg\n          src={url}\n          key={index}\n          onLoad={() =\u003e {\n            // img loaded, should to destroy object url\n            text2image.destroyURL(url)\n          }}\n        /\u003e\n      ))}\n    \u003c/div\u003e\n  )\n}\n```\n\n### mask image\n\n```js\nasync function renderTextImage() {\n  // get mask image\n  await text2image.loadImage(imgUrl)\n\n  // create object url\n  const url = await text2image.createURL('hello world')\n  // or\n  // const url = await text2image.createURL({\n  //   text: 'hello world',\n  //   // some options\n  // })\n\n  const img = new Image()\n  // img loaded, should to destroy object url\n  img.onload = () =\u003e {\n    text2image.destroyURL(url)\n  }\n  img.src = url\n\n  document.body.appendChild(img)\n}\n\nrenderTextImage()\n```\n\n## DataURL\n\n### js/html\n\n```js\nconst url = text2image.toDataURL('hello world')\nconst img = new Image()\nimg.src = url\ndocument.body.appendChild(img)\n```\n\n### React\n\n```tsx\nimport { useEffect, useState } from 'react'\nimport text2image from '../../../src'\n\nexport default function App() {\n  const [images, setImages] = useState\u003cstring[]\u003e([])\n\n  useEffect(() =\u003e {\n    const url = text2image.toDataURL('Hello World')\n    // const url = text2image.toDataURL({\n    //   text: 'hello world',\n    //   // some options\n    // })\n    setImages((urls) =\u003e [...urls, url])\n  }, [])\n\n  return (\n    \u003cdiv\u003e\n      {images.map((url, index) =\u003e (\n        \u003cimg src={url} key={index} /\u003e\n      ))}\n    \u003c/div\u003e\n  )\n}\n```\n\n### mask image\n\n```js\nasync function getTextImage() {\n  // get mask image\n  await text2image.loadImage(imgUrl)\n\n  // create data url\n  const url = text2image.toDataURL('hello world')\n  // or\n  // const url = text2image.toDataURL({\n  //   text: 'hello world',\n  //   // some options\n  // })\n\n  const img = new Image()\n  img.src = url\n\n  document.body.appendChild(img)\n}\n\ngetTextImage()\n```\n\n## Options\n\n| name         | type             | default     | description                  |\n| ------------ | ---------------- | ----------- | ---------------------------- |\n| `text`       | `string`         | `null`      | image content                |\n| `fontSize`   | `number\\|string` | `30`        | font size(like css)          |\n| `fontWeight` | `number\\|string` | `normal`    | font weight(like css)        |\n| `fontFamily` | `string`         | `arial`     | font family(like css)        |\n| `color`      | `string`         | `#000000`   | font color(like css)         |\n| `type`       | `string`         | `image/png` | image type                   |\n| `quality`    | `number`         | `0.92`      | image quality                |\n| `alpha`      | `number`         | `0.3`       | mask alpha(水印图片的透明度) |\n\n## Example\n\n\u003e [https://text-image.vercel.app/](https://text-image.vercel.app/)\n\n## Contributing\n\nWelcome\n\n- Fork it\n\n- Submit pull request\n\n## Polyfills needed to support older browsers\n\n\u003e `HTMLCanvasElement.prototype.toBlob`: see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill) for details about unsupported older browsers and a simple polyfill.\n\n```js\n;(function () {\n  if (!HTMLCanvasElement.prototype.toBlob) {\n    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {\n      value: function (callback, type, quality) {\n        var binStr = atob(this.toDataURL(type, quality).split(',')[1]),\n          len = binStr.length,\n          arr = new Uint8Array(len)\n\n        for (var i = 0; i \u003c len; i++) {\n          arr[i] = binStr.charCodeAt(i)\n        }\n\n        callback(new Blob([arr], { type: type || 'image/png' }))\n      },\n    })\n  }\n})()\n```\n\n## Browsers support\n\nModern browsers and IE10.\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eOpera |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE10, Edge                                                                                                                                                                                                      | last 2 versions                                                                                                                                                                                                   | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                           |\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxg4%2Ftext2image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxg4%2Ftext2image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxg4%2Ftext2image/lists"}