text2image

convert text to image by canvas

Installation

Install with npm or Yarn

# npm
npm i @xg4/text2image

# yarn
yarn add @xg4/text2image

# pnpm
pnpm i @xg4/text2image

Usage

Instance

import text2image, { Text2Image } from '@xg4/text2image'

// use current options convert default options
text2image.setDefaultOptions({
  // some options
})

// reset default options
text2image.resetDefaultOptions()

// you can create new instance or use text2image singleton
const t2 = new Text2Image()
// or
// initialization default options
const t2 = new Text2Image({
  fontSize: 13,
  color: '#000000',
  fontFamily: 'arial',
  fontWeight: 'bold',
  type: 'image/png',
  quality: 0.92,
})

// use current options convert default options
t2.setDefaultOptions({
  // some options
})

// reset default options
t2.resetDefaultOptions()

Object URL

js/html

async function renderTextImage() {
  const url = await text2image.createURL('hello world')
  const img = new Image()
  img.src = url
  document.body.appendChild(img)
}

renderTextImage()

React

import { useEffect, useState } from 'react'
import text2image from '../../../src'

export default function App() {
  const [images, setImages] = useState<string[]>([])

  useEffect(() => {
    async function renderTextImage() {
      const url = await text2image.createURL('Hello World')
      setImages((urls) => [...urls, url])
    }

    renderTextImage()
  }, [])

  return (
    <div>
      {images.map((url, index) => (
        <img
          src={url}
          key={index}
          onLoad={() => {
            // img loaded, should to destroy object url
            text2image.destroyURL(url)
          }}
        />
      ))}
    </div>
  )
}

mask image

async function renderTextImage() {
  // get mask image
  await text2image.loadImage(imgUrl)

  // create object url
  const url = await text2image.createURL('hello world')
  // or
  // const url = await text2image.createURL({
  //   text: 'hello world',
  //   // some options
  // })

  const img = new Image()
  // img loaded, should to destroy object url
  img.onload = () => {
    text2image.destroyURL(url)
  }
  img.src = url

  document.body.appendChild(img)
}

renderTextImage()

DataURL

js/html

const url = text2image.toDataURL('hello world')
const img = new Image()
img.src = url
document.body.appendChild(img)

React

import { useEffect, useState } from 'react'
import text2image from '../../../src'

export default function App() {
  const [images, setImages] = useState<string[]>([])

  useEffect(() => {
    const url = text2image.toDataURL('Hello World')
    // const url = text2image.toDataURL({
    //   text: 'hello world',
    //   // some options
    // })
    setImages((urls) => [...urls, url])
  }, [])

  return (
    <div>
      {images.map((url, index) => (
        <img src={url} key={index} />
      ))}
    </div>
  )
}

mask image

async function getTextImage() {
  // get mask image
  await text2image.loadImage(imgUrl)

  // create data url
  const url = text2image.toDataURL('hello world')
  // or
  // const url = text2image.toDataURL({
  //   text: 'hello world',
  //   // some options
  // })

  const img = new Image()
  img.src = url

  document.body.appendChild(img)
}

getTextImage()

Options

name	type	default	description
`text`	`string`	`null`	image content
`fontSize`	`number\|string`	`30`	font size(like css)
`fontWeight`	`number\|string`	`normal`	font weight(like css)
`fontFamily`	`string`	`arial`	font family(like css)
`color`	`string`	`#000000`	font color(like css)
`type`	`string`	`image/png`	image type
`quality`	`number`	`0.92`	image quality
`alpha`	`number`	`0.3`	mask alpha(水印图片的透明度)

Example

https://text-image.vercel.app/

Contributing

Welcome

Fork it
Submit pull request

Polyfills needed to support older browsers

HTMLCanvasElement.prototype.toBlob: see MDN for details about unsupported older browsers and a simple polyfill.

;(function () {
  if (!HTMLCanvasElement.prototype.toBlob) {
    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
      value: function (callback, type, quality) {
        var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
          len = binStr.length,
          arr = new Uint8Array(len)

        for (var i = 0; i < len; i++) {
          arr[i] = binStr.charCodeAt(i)
        }

        callback(new Blob([arr], { type: type || 'image/png' }))
      },
    })
  }
})()

Browsers support

Modern browsers and IE10.

IE / Edge	Firefox	Chrome	Safari	Opera
IE10, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

LICENSE

MIT