1.0.0 • Published 2 years ago
@xg4/text2image v1.0.0
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
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