视频素材来源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/[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 | 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，而且占用的内存较大）
• [ ] 丰富控件功能
• [ ] 增加字符画的可调节参数的维度
• [x] resize

License

MIT