text2image

convert text to image by canvas

Installation

Install with npm or Yarn

# npm
$ npm install @xg4/text2image --save

# yarn
$ yarn add @xg4/text2image

Usage

import Text2Image from '@xg4/text2image'

const ti = new Text2Image()
// or
// initialization default options
const ti = new Text2Image({
  fontSize: 13,
  color: '#000000',
  fontFamily: 'arial',
  fontWeight: 'bold',
  type: 'image/png',
  quality: 0.92,
})

// get mask image
Text2Image.createMask(imgUrl).then((image) => {
  // set background image
  ti.setMask(image)
})

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

const img = new Image()
// img loaded, remenber to destroy object url
img.onload = function () {
  ti.destroyURL(this.src)
}
img.src = url

document.body.appendChild(img)

// get mask image
Text2Image.createMask(imgUrl).then((image) => {
  // set background image
  ti.setMask(image)
})

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

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

document.body.appendChild(img)

Example

https://xg4.github.io/text2image

API

Constructor Options

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(水印图片的透明度) |

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

// reset default options
ti.resetDefaultOptions()

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