Canvas-to-text NPM

简介

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

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

使用方法

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	-	传入画布的高度

注意事项

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

cyj text canvas text-canvas canvas-to-text text-image text-video

@bundled-es-modules/axios vite-plugin-dts

1.1.0

2 years ago

1.0.0

2 years ago