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

文章目录

- 1. html基本结构
- 2. 画文字
- 3. 画图片
- 4. 画视频
- 参考地址

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',// 可选，配置作画半径，该值越大越稀疏，默认为 10raduis: 10,// 可选，配置是否灰度化，若开启灰度化则会丢失色彩，默认为 falseisGray: false,// 必填，配置作画内容source: {// 必填，配置画什么文本text: 'hello ddg',// 选填，配置文本使用的字体，CSS 格式，默认为微软雅黑fontFamily: 'Microsoft YaHei',// 选填，配置文本尺寸，默认为 200fontSize: 200},})</script>

3. 画图片

在这里插入图片描述

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

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

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

在这里插入图片描述

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

4. 画视频

在这里插入图片描述

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

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