@xg4/text2image
Version:
convert text to image by canvas
161 lines (121 loc) • 6.7 kB
Markdown
# text2image
[](https://www.travis-ci.com/xg4/text2image)
[](https://www.npmjs.com/package/@xg4/text2image)
[](https://www.npmjs.com/package/@xg4/text2image)
> convert text to image by canvas
## Installation
### Install with npm or Yarn
```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](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(水印图片的透明度) |
```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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill) 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.
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| IE10, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## LICENSE
MIT