【日常记录】【插件】多媒体文本化: text-image 可以将文字、图片、视频进行「文本化」

嘤嘤怪呆呆狗

已于 2024-07-27 08:42:19 修改

阅读量360

点赞数 6

分类专栏：日常记录文章标签：前端 vue html5 javascript

于 2024-07-27 08:33:15 首次发布

本文链接：https://blog.csdn.net/qq_45634593/article/details/140729623

版权

日常记录专栏收录该内容

14 篇文章 1 订阅

订阅专栏

文章目录

1. html基本结构

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

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

</html>

需要引入这个 text-image 的插件

立即执行函数版本，会暴露一个window全局变量

2. 画文字

在这里插入图片描述

  <script>
    textImage.createTextImage({
      // 必填，配置canvas元素，最终作画在其上完成
      canvas: document.querySelector('#demo1'),  // 这个地方，是获取一个 canvas 标签
      // 可选，配置作画的文本，默认为'6'
      replaceText: '6',
      // 可选，配置作画半径，该值越大越稀疏，默认为 10
      raduis: 10,
      // 可选，配置是否灰度化，若开启灰度化则会丢失色彩，默认为 false
      isGray: false,
      // 必填，配置作画内容
      source: {
        // 必填，配置画什么文本
        text: 'hello ddg',
        // 选填，配置文本使用的字体，CSS 格式，默认为微软雅黑
        fontFamily: 'Microsoft YaHei',
        // 选填，配置文本尺寸，默认为 200
        fontSize: 200
      },
    })
  </script>

3. 画图片

在这里插入图片描述

图片的原图在网上找一个就可以

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

同样也是创建了一个新的 canvas 标签

在这里插入图片描述

replaceText: '呆呆狗', 可以配置这个，进行更改作画的文本

4. 画视频

在这里插入图片描述

其实这个地方，是一个动态的，因为引入的是一个视频

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