前端小玩意 - 太有创意了~ 这个开源项目竟能将文字、图片、视频秒变文本格式！

最新推荐文章于 2025-03-05 16:24:22 发布

原创最新推荐文章于 2025-03-05 16:24:22 发布

· 581 阅读

8 ·

版权

文章标签：

#前端 #开源项目 #文本格式 #图片 #视频 #文字 #js

HTML/CSS/JS 专栏收录该内容

93 篇文章

订阅专栏

哈喽，大家好 👨🏻‍💻 今天给大家推荐一个超炫酷的项目——它能让文字、图片和视频瞬间转化为我们熟悉的文本格式 📝 🎬

前言

就在最近，我在 GitHub 上闲逛时，偶然发现了一个超炫酷的项目——它能让文字、图片和视频瞬间转化为我们熟悉的文本格式！📝🎬

这不仅仅是一个工具，更是一个激发创意的火花💥！想象一下，你可以随时随地捕捉灵感，无论是截图、短视频还是网页，都能一键转化为文字，方便你随时回顾和整理。🌟

而且，它的使用非常简单方便！快来和我一起探索这个神秘的项目吧！🔍💻

先来看一波效果

文字转文本格式

图片转文本格式

视频转文本格式

如何使用

下载对应的 js 文件直接引入项目中即可

文字转文本格式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>文字转文本格式</title>
</head>
<body>
  <canvas id="demo"></canvas>
  <script src="../dist/text-image.iife.js"></script>
  <script>
    textImage.createTextImage({
      canvas: document.getElementById('demo'),
      replaceText: 'xy',
      source: {
        text: '前端开发爱好者',
      },
    });
  </script>
</body>
</html>

图片转文本格式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>图片转文本格式</title>
</head>
<body>
  <canvas id="demo"></canvas>
  <script src="../dist/text-image.iife.js"></script>
  <script>
    textImage.createTextImage({
      canvas: document.getElementById('demo'),
      raduis: 7,
      isGray: true,
      source: {
        img: './assets/1.png',
      },
    });
  </script>
</body>
</html>

视频转文本格式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>视频转文本格式</title>
</head>
<body>
  <canvas id="demo"></canvas>
  <script src="../dist/text-image.iife.js"></script>
  <script>
    textImage.createTextImage({
      canvas: document.getElementById('demo'),
      raduis: 8,
      isGray: true,
      source: {
        video: './assets/trailer.mp4',
        height: 700,
      },
    });
  </script>
</body>
</html>

技术揭秘

抱着好奇的心态去研究了下作者源代码，发现是使用 Canvas 对 文字、图片、视频 进行逐帧绘制。

实现的主要逻辑在 Painter.ts 中

import { BaseSource } from './source';

export type PainterOptions = {
  canvas: HTMLCanvasElement;
  replaceText: string;
  raduis: number;
  source: BaseSource;
  isDynamic: boolean;
  isGray: boolean;
};

export class Painter {
  private replaceText: string;
  private raduis: number;
  private source: BaseSource;
  private isDynamic: boolean;
  private canvas: HTMLCanvasElement;
  private ctx: CanvasRenderingContext2D;
  private textIndex: number;
  private isGray: boolean;
  private raqId: number;
  constructor(options: PainterOptions) {
    this.replaceText = options.replaceText;
    this.raduis = options.raduis;
    this.source = options.source;
    this.isGray = options.isGray;
    this.isDynamic = options.isDynamic;
    this.canvas = options.canvas;
    this.ctx = this.canvas.getContext('2d')!;
    this.textIndex = 0;
    this.raqId = 0;
    this.initContext();
  }

  fps() {
    if (this.isDynamic) {
      this.raqId = requestAnimationFrame(() => {
        this.draw();
        this.fps();
      });
    } else {
      this.draw();
    }
  }

  stop() {
    cancelAnimationFrame(this.raqId);
    this.raqId = 0;
  }

  private initContext() {
    this.ctx.font = `bold 12px 'Roboto Mono' 'Microsoft YaHei' '微软雅黑' 'sans-serif'`;
    this.ctx.textAlign = 'center';
    this.ctx.textBaseline = 'middle';
  }

  private drawText(
    x: number,
    y: number,
    rgba: [number, number, number, number]
  ) {
    let [r, g, b, a] = rgba;
    if (!a) {
      return;
    }
    if (this.isGray) {
      r = g = b = 0.2126 * r + 0.7152 * g + 0.0722 * b;
    }
    this.ctx.fillStyle = `rgba(${r},${g},${b},${a})`;
    const c = this.replaceText[this.textIndex];
    this.textIndex = (this.textIndex + 1) % this.replaceText.length;
    this.ctx.fillText(c, x, y);
  }

  private draw() {
    const bitmap = this.source.getBitmap();
    this.canvas.width = bitmap.width;
    this.canvas.height = bitmap.height;
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    for (let y = 0; y < bitmap.height; y += this.raduis) {
      for (let x = 0; x < bitmap.width; x += this.raduis) {
        const rgba = bitmap.getPixelAt(x, y);
        this.drawText(x, y, rgba);
      }
    }
  }
}

该代码定义了一个名为 Painter 的类，用于在画布上绘制文本。

该类接受一个 PainterOptions 对象作为构造函数参数，以配置画布的属性。

类中包含的方法有：

fps(): 如果 isDynamic 为 true，则使用 requestAnimationFrame 循环调用 draw 方法进行绘制。
stop(): 取消 requestAnimationFrame 的循环调用。
private initContext(): 初始化画布上下文的属性，如字体样式和对齐方式。
private drawText(x: number, y: number, rgba: [number, number, number, number]): 在指定坐标绘制文本，颜色由 rgba 参数指定。如果 isGray 为 true，则将颜色转换为灰度色。replaceText 属性用于替换画布上的文本。
private draw(): 根据 source 属性获取位图，设置画布的宽高，并清除画布。然后根据位图的数据，在画布上按指定的半径绘制文本。