video2asciiart

### 通过 npm 引入

Usage no npm install needed!

<script type="module">
  import video2asciiart from 'https://cdn.skypack.dev/video2asciiart';
</script>

README

Video2ASCIIArt

🎥 🎨一个将普通视频实时转换为字符画视频的Vue组件

视频素材来源KBHD

📒 如何使用

通过 npm 引入

先玩一玩它

$ npm install video2asciiart
# or
$ yarn add video2asciiart

<template>
    <div class="container">
        <Video2ASCIIArt>
            <video :src="videoURL" controls="controls" crossorigin=""></video>
        </Video2ASCIIArt>
    </div>
</template>
<script>
import Video2ASCIIArt from 'video2asciiart'

export default {
    components: {
        Video2ASCIIArt
    }
}
</script>

CDN <script> 标签引入

标签用法 （此在线 demo 在 safari 上可能会有问题）

<meta charset="utf-8" />
<title>Video2ASCIIArt demo</title>
<!-- import vue -->
<script src="https://unpkg.com/vue"></script>
<!-- import the component -->
<script src="https://cdn.jsdelivr.net/npm/video2asciiart@0.1.2/lib/Video2ASCIIArt.umd.js"></script>

<div id="app">
    <demo charppi="2" color="gray">
        <!-- normal video tag -->
        <video
            src="../../your/video/url"
            controls="controls"
            crossorigin=""
        ></video>
    </demo>
</div>

<script>
    new Vue({
        components: {
            demo: Video2ASCIIArt
        }
    }).$mount('#app')
</script>

组件属性

Props Name Type Description
charppi <String|Number>[0.25|0.5|1|2] 改变字符的密度
color <String> (css like) 控制字符的颜色

⛏️ 贡献代码

安装依赖

yarn install

快速开发(HMR)

yarn run serve

构建打包组件

yarn run build:lib

构建打包 demo

yarn run build:demo

等优化

  • 内存优化（目前打开开发者工具查看内存，有比较明显的阶段性内存递增和 GC，而且占用的内存较大）
  • 丰富控件功能
  • 增加字符画的可调节参数的维度
  • resize

License

MIT