text-image.iife.js是一款将文本图片视频转换成文字的插件-BFW插件库

text-image.iife.js是一款将文本图片视频转换成文字的插件

text-image 可以将文字、图片或视频进行“文本化”,生成一种把内容嵌入在文字中的效果。它通过Canvas实现这一效果,只需简单配置即可使用。

主要功能特点:

输入文本、图片或视频路径进行绘制

可配置绘制文本内容、字体属性等

可配置画布尺寸、是否灰度化等附加选项

支持ESM和IIFE两种模块引入方式

使用较简单,只需引入构建后的JS文件,配置相关参数即可完成内容的“文本化”效果绘制。

画文字

textImage.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
  },
})

画图片

textImage.createTextImage({
  // 必填，配置canvas元素，最终作画在其上完成
  canvas: document.querySelector('canvas'),
  // 可选，配置作画的文本，默认为'6'
  replaceText: '6',
  // 可选，配置作画半径，该值越大越稀疏，默认为 10
  raduis: 10,
  // 可选，配置是否灰度化，若开启灰度化则会丢失色彩，默认为 false
  isGray: false,
  // 必填，配置作画内容
  source: {
    // 必填，配置画的图片路径
    img: 'path',
    // 选填，配置图片宽度，默认为图片自身宽度
    width: 500,
    // 选填，配置图片高度，默认为图片自身高度
    height: 300
  },
})

画视频

textImage.createTextImage({
  // 必填，配置canvas元素，最终作画在其上完成
  canvas: document.querySelector('canvas'),
  // 可选，配置作画的文本，默认为'6'
  replaceText: '6',
  // 可选，配置作画半径，该值越大越稀疏，默认为 10
  raduis: 10,
  // 可选，配置是否灰度化，若开启灰度化则会丢失色彩，默认为 false
  isGray: false,
  // 必填，配置作画内容
  source: {
    // 必填，配置画的视频路径
    video: 'path',
    // 选填，配置视频宽度，默认为视频自身宽度
    width: 500,
    // 选填，配置视频高度，默认为视频自身高度
    height: 300
  },
})

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />

</head>

<body>
    <canvas id="demo1"></canvas>
    <canvas id="demo2"></canvas>

    <canvas id="demo3"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/text-image.iife.js"></script>
    <script>
        textImage.createTextImage({
            canvas: document.getElementById('demo1'),
            replaceText: '123',
            source: {
                text: '科技与狠活',
            },
        });
        textImage.createTextImage({
            canvas: document.getElementById('demo2'),
            raduis: 7,
            isGray: true,
            source: {
                img: '/asset/logo.png',
            },
        });
        textImage.createTextImage({
            canvas: document.getElementById('demo3'),
            raduis: 8,
            isGray: true,
            source: {
                img: '/asset/demo.mp4',
                height: 700,
            },
        });
    </script>
</body>

</html>

github地址：https://github.com/Sunny-117/text-image