png2aa 0.1.2

Convert PNG image to ASCII Art.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
        <style type='text/css'>
            @font-face
            {
                font-family: VL ゴシック;
                src: url('https://cdn.leafscape.be/VLGothic/VL-Gothic-Regular_web.woff2')
                     format("woff2");
            }
            img {
                max-width: 400px;
            }
            div#app {
                width: 850px;
                margin: 50px auto 50px auto;
                display: flex;
                flex-flow: column;
            }
            div#view {
                display: flex;
                flex-flow: row;
            }
            textarea {
                width:  400px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id='app'>
            <div id='controller'>
                image(png only): <input type='file' @change=setImage><br />
                font size: <input type='number' v-model='font_size' style='width: 50px;'>px<br />
                blocksize: <input type='number' v-model='options.blocksize' style='width: 50px;'><br /> 
                character detect threth: <input type='number' v-model='options.char_detect_thresh' style='width: 50px;'><br />
                line detect thresh: <input type='number' v-model='options.line_detect_thresh' style='width: 50px;'>
            </div>
            <div id='view'>
                <div>
                    <div>
                        <textarea :style="textarea_style">{{ aa }}</textarea>
                        <span>{{ aa_text_count }}文字</span>
                    </div>
                </div>
                <div>
                    <img :src='imageUrl' />
                </div>
            </div>
        </div>
        <script>
            function queryString(params) {
                const res = Object.keys(params).map(function (key) {
                    return `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`;
                }).join('&');
                return res;
            }

            const app = new Vue({
                el: '#app',
                data: {
                    image: null,
                    imageUrl: '',
                    font_size: 9,
                    aa: '',
                    options: {
                        blocksize: 32,
                        char_detect_thresh: 10,
                        line_detect_thresh: 200,
                    }
                },
                computed: {
                    textarea_style: function() {
                        return Object.assign(
                            {}, this.textarea_style_base,
                            {'font-size': `${this.font_size}px`, 'line-height': `${this.font_size}px`}
                        );
                    },
                    aa_text_count: function() {
                        return this.aa.length;
                    }
                },
                methods: {
                    setAA: function () {
                        this.aa = this.message.split('').reverse().join('')
                    },
                    setImage: function(e) {
                        const files = e.target.files || e.dataTransfer.files;
                        if (!files.length) {
                            return;
                        }
                        this.image = files[0];
                    },
                    uploadImage: function(){
                        this.$http.post('/image?'+queryString(this.options), this.image, { headers: { 'Content-Type': 'multipart/form-data' }})
                                    .then(response => { this.aa = response.body.aa });
                    },
                },
                watch: {
                    options: {
                        handler: function() { this.uploadImage() },
                        deep: true
                    },
                    image: function() {
                        this.uploadImage();
                        const reader = new FileReader();
                        reader.readAsDataURL(this.image);
                        reader.addEventListener('load', () => {
                            this.imageUrl = reader.result;
                        });
                    },
                }
            })
        </script>
    </body>
</html>