@xg4/text2image

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