README-en.md

Video2ASCIIArt

🎥 🎨A Vue component that converts ordinary video into ASCII-Art-video in real time

Video material source KBHD

English | 中文

📒 Usage

Install with npm

Try it at once!

$ 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>

(This live demo may have problems on 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"
            Controlscontrols"controls"
            Crossorigin=""
        ></video>
    </demo>
</div>

<script>
    New vue({
        Components: {
            Demo: Video2ASCIIArt
        }
    }).$mount('#app')
</script>

Component Attributes

Props Name	Type	Default	Description
charppi	String|Number	1	Change the density of characters [0.25|0.5|1|2]
color	String	#000000	Controlling the color of characters (css like)

Contributing

Welcome to pr && issue!

Installation dependencies

Yarn install

Development (HMR)

Yarn run serve

Build the component

Yarn run build:lib

Build the demo

Yarn run build:demo

TODO

• Memory optimization (currently open developer tools to view memory, there are obvious phased memory increments and GC, and it takes up a lot of memory)
• Rich control features
• Increase the dimension of the adjustable parameters of the character drawing
• resize

License

MIT