text-to-image-video可以将文字、图片、视频进行「文本化」
只需要通过简单的配置即可使用
text-to-image-video.umd.js：适用于基于 UMD 的方式导入 会生产全局方法createTextImage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<canvas id="demo"></canvas>
<script src="../dist/text-to-image-video.umd.js"></script>
<script>
createTextImage({
canvas: document.getElementById('demo'),
source: {
text: 'Text Image', // 绘制的文本是：Text Image
fontFamily: 'Roboto Mono',
},
});
</script>
</body>
</html>text-to-image-video.es.js：适用于基于 ESM 的方式导入 (Vue 也同时支持)
yarn add text-to-image-video
or
npm i text-to-image-video
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import createTextImage,{ TextImageOption } from 'text-to-image-video';
React.useEffect(() => {
createTextImage({
canvas: document.getElementById('demo'),
source: {
text: 'Text Image', // 绘制的文本是：Text Image
fontFamily: 'Roboto Mono',
},
}:TextImageOption);
}, []);
const App = () => {
return <canvas id="demo" />;
};
ReactDOM.render(<App />, document.getElementById('root'));createTextImage({
// 必填，配置canvas元素，最终作画在其上完成
canvas: document.querySelector('canvas'),
// 可选，配置作画的文本，默认为'6'
replaceText: '6',
// 可选，配置作画半径，该值越大越稀疏，默认为 10
raduis: 10,
// 可选，配置是否灰度化，若开启灰度化则会丢失色彩，默认为 false
isGray: false,
// 必填，配置作画内容
source: {
// 必填，配置画什么文本
text: 'Text Image',
// 选填，配置文本使用的字体，CSS 格式，默认为微软雅黑
fontFamily: 'Microsoft YaHei',
// 选填，配置文本尺寸，默认为 200
fontSize: 200,
},
});createTextImage({
// 必填，配置canvas元素，最终作画在其上完成
canvas: document.querySelector('canvas'),
// 可选，配置作画的文本，默认为'6'
replaceText: '6',
// 可选，配置作画半径，该值越大越稀疏，默认为 10
raduis: 10,
// 可选，配置是否灰度化，若开启灰度化则会丢失色彩，默认为 false
isGray: false,
// 必填，配置作画内容
source: {
// 必填，配置画的图片路径
img: 'path',
// 选填，配置图片宽度，默认为图片自身宽度
width: 500,
// 选填，配置图片高度，默认为图片自身高度
height: 300,
},
});createTextImage({
// 必填，配置canvas元素，最终作画在其上完成
canvas: document.querySelector('canvas'),
// 可选，配置作画的文本，默认为'6'
replaceText: '6',
// 可选，配置作画半径，该值越大越稀疏，默认为 10
raduis: 10,
// 可选，配置是否灰度化，若开启灰度化则会丢失色彩，默认为 false
isGray: false,
// 必填，配置作画内容
source: {
// 必填，配置画的视频路径
video: 'path',
// 选填，配置视频宽度，默认为视频自身宽度
width: 500,
// 选填，配置视频高度，默认为视频自身高度
height: 300,
},
});