本工具是支持用文字画图片和视频的插件。
- 文字画文字
- 文字画图片
- 文字画视频
npm i canvas-to-textimport { CanvasObj } from "canvas-to-text";import { CanvasObj } from "canvas-to-text";
new CanvasObj({
el:document.querySelector('#my') as HTMLCanvasElement,
text:'牛', //用来画的文字
fontSize:5,
interval:0,
source:{
image:'/static/测2.jpg', //画图片
// video:"/static/video/jump.mp4", //画视频
// text:'画', //画文字
// textAlign:'leftTop', //画文字的位置
},
fail(error) {
console.log(error)
},
})| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| el | 画布 | HTMLCanvasElement | - | - |
| text | 用来画的文字 | string | - | - |
| fontSize | 用来画的文字的大小 | number | - | 1 |
| interval | 间距 | number | - | 0 |
| source | 需要画的来源信息 | Object | - | - |
| fail | 报错触发函数 | (error: string ) => void | - | - |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| image | 图片地址 | string | - | - |
| video | 视频地址 | string | - | - |
| text | 画的文字 | string | - | - |
| textAlign | 文字地址 | string | - | 'middleCenter' |
| textFamily | 文字体系 | string | - | 'Arial' |
| width | 画的宽度 | number | - | 传入画布的宽度 |
| height | 画的高度 | number | - | 传入画布的高度 |