Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
60 lines (56 sloc) 1.69 KB
<!DOCTYPE html>
<meta charset="utf-8">
<script src="src/jscii.js"></script>
<style type="text/css">
html, body {
font: normal 12px/18px 'helvetica neue' arial;
color: #333;
.section > pre { font: bold 8px/5px monospace; color: #000; clear: left; }
video { width: 200px; }
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
.clearfix { display: inline-block; }
<a href=""><img style="position: absolute; top: 0; right: 0; border: 0;" src="" alt="Fork me on GitHub"></a>
<div class="container">
<h2>Image to ASCII string</h2>
<div class="section clearfix">
<img width="150" id="dpham" src="test/dpham.jpg">
<pre id="imgascii"></pre>
<h2>Video to ASCII string <small>(must enable video)</small></h2>
<div class="section clearfix">
<video id="video" autoplay></video>
<button id="toggleVideo">Stop ASCII Rendering</button>
<pre id="ascii"></pre>
Jscii.renderVideo(document.getElementById('video'), document.getElementById('ascii'));
Jscii.renderImage(document.getElementById('dpham'), document.getElementById('imgascii'));
var button = document.getElementById('toggleVideo');
button.addEventListener('click', function() {
if(button.innerHTML === 'Stop ASCII Rendering') {
button.innerHTML = 'Start ASCII Rendering';
} else {
button.innerHTML = 'Stop ASCII Rendering';