字符画图片生成版

青旅半醒 2023-02-15 03:47 17阅读 0赞

看图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70][]

有木有很可爱呀？

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Char Picture</title>
        <style>
            #show{
                font-family: Courier New;
                font-size: 10px;
                line-height: 8px;
            }
        </style>
        <script>
            /**
             * Created by Roger on 16/1/2.
             */
            var map=getCharsMap();
            /*
             * this function can convert the image in canvas to a char-picture(string)
             * cotext:the canvas context;width:the image width;height:the image height; rowChars:how many chars in one row.
             */
            function toChars(context, width, height, rowChars) {
                var pixels = [],
                    output = "",
                    imageData = context.getImageData(0, 0, width, height),
                    rowChars = width < rowChars ? width : rowChars,
                    char_h = width / rowChars,
                    char_w = char_h,
                    rows = height / char_h,
                    cols = rowChars,
                    //to get a block of pixiels average gray-value.
                    getBlockGray = function (x, y, w, h) {
                        var sumGray = 0, pixels;
                        for (var row = 0; row < w; row++) {
                            for (var col = 0; col < h; col++) {
                                var cx = x + col, //current position x
                                    cy = y + row, //current positon y
                                    index = (cy * imageData.width + cx) * 4, //current index in rgba data array
                                    data = imageData.data,
                                    R = data[index],
                                    G = data[index + 1],
                                    B = data[index + 2],
                                    gray = ~~(R * 0.3 + G * 0.59 + B * 0.11);
                                sumGray += gray;
                            }
                        }
                        pixels = w * h;
                        return ~~(sumGray / pixels);
                    };
                for (var r = 0; r < rows; r++) {
                    for (var c = 0; c < cols; c++) {
                        var pos_x = ~~(c * char_h),
                            pos_y = ~~(r * char_h),
                            avg = getBlockGray(pos_x, pos_y, ~~char_w, ~~char_h),
                            ch = map[avg];
                        output += ch;
                    }
                    output += '\r\n';
                }
                ;
                return output;
            }
            function getCharsMap() {
                var chars = ['@', 'w', '#', '$', 'k', 'd', 't', 'j', 'i', '.', ' '];
                var step = 25,
                    map = {};
                for (var i = 0; i < 256; i++) {
                    var index = ~~(i / 25)
                    map[i] = chars[index];
                }
                ;
                return map;
            }
        </script>
    </head>
    <body>
    <input type="file" id="file"><button type="button" onclick="showImage()">展示</button><br>
    <img src="" style="width: 100px"/>
    <pre id="show"></pre>
    <script>
        var map=getCharsMap(),show=document.getElementById("show"),
            img=document.getElementsByTagName("img")[0],
            canvas = document.createElement("canvas");
        function showImage(){
            var file = document.getElementById('file').files[0],
                ctx = canvas.getContext('2d'),
                url = URL.createObjectURL(file);
            if(!file){
                alert("请先选择文件");
            }
            img.src = url;
            img.onload=function(){
                canvas.width=img.naturalWidth;
                canvas.height=img.naturalHeight;
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                show.innerText=toChars(ctx,canvas.width,canvas.height,100);
            }
        }
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604144812451.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70