Text-to-image-video NPM

text-to-image-video 库使用说明

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,
  },
});

text-image text-to-image text-to-video text-video image-video 文字视频文字图片动态文字

@infinitebrahmanuniverse/nolb-text-@everything-registry/sub-chunk-2930

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago