text2image


> convert text to image by canvas

Installation

$3

``bash


npm


$ npm install @xg4/text2image --save
`

`bash


yarn


$ yarn add @xg4/text2image
`

Usage

`js
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,
})
`

`js
// 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)
`

`js
// 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

$3

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

`js
// 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.

`js
;(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