random-yang/video2asciiart

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

Video2ASCIIArt

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

视频素材来源KBHD

English | 中文

📒 如何使用

通过 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/[email protected]/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	Default	Description
charppi	String|Number	1	改变字符的密度[0.25|0.5|1|2]
color	String	#000000	控制字符的颜色 (css like)

⛏️ 贡献代码

欢迎 pr && issue！

安装依赖

yarn install

快速开发(HMR)

yarn run serve

构建打包组件

yarn run build:lib

构建打包 demo

yarn run build:demo

TODO

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

License

MIT