简介

本工具是支持用文字画图片和视频的插件。

• 文字画文字
• 文字画图片
• 文字画视频

使用方法

1.npm安装

npm i canvas-to-text

2.引入

import { CanvasObj } from "canvas-to-text";

3.使用示例

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 | - | - |

source参数结构

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----:| :----: | :----: | :----: | :----: | | image | 图片地址 | string | - | - | | video | 视频地址 | string | - | - | | text | 画的文字 | string | - | - | | textAlign | 文字地址 | string | - | 'middleCenter' | | textFamily | 文字体系 | string | - | 'Arial' | | width | 画的宽度 | number | - | 传入画布的宽度 | | height | 画的高度 | number | - | 传入画布的高度 |

注意事项

图片和视频地址不能跨域，如有跨域请自行代理