基于egret的抖音上的ASCII码视频或图片

以前写过C版的，看到最近抖音有个ASCII码视频，想想可以这么处理。不废话了，扔代码如下：

        let img = this.createBitmapByName("egret_icon_png");
        img.visible = false;
        this.addChild(img);
        let stageW = this.stage.stageWidth;
        let stageH = this.stage.stageHeight;

        let _fontSize: number = 20;
        let _chars: string = this.toChars(img, Math.floor(stageW / _fontSize));

        let _label: eui.Label = new eui.Label();
        _label.size = _fontSize;
        _label.text = _chars;
        // _label.fontFamily="SimHei";
        _label.lineSpacing = 0;
        _label.textAlign = "center";
        // _label.horizontalCenter = 0;
        // _label.verticalCenter = 0;
        this.addChild(_label);

上面调用的相关方法如下：

private toChars(img: egret.Bitmap, rowChars: number) {
        let map = this.getCharsMap();

        rowChars = img.width < rowChars ? img.width : rowChars;
        let char_h = img.width / rowChars;
        let char_w = char_h;
        let rows = img.height / char_h;
        let cols = rowChars;

        let _rgb: number[] = img.texture.getPixels(0, 0, img.width, img.height);
        function getBlockGray(x, y, w, h) {
            let sumGray = 0;
            let pixels = 0;
            for (let row = 0; row < w; row++) {
                for (let col = 0; col < h; col++) {
                    let cx = x + col; //current position x                        
                    let cy = y + row; //current positon y                        
                    let index = (cy * img.width + cx) * 4; //current index in rgba data array                        
                    let data = _rgb;
                    let R = data[index + 1];
                    let G = data[index + 2];
                    let B = data[index + 3];
                    let gray = ~~(R * 0.3 + G * 0.59 + B * 0.11);
                    sumGray += gray;
                }
            }
            pixels = w * h;
            return ~~(sumGray / pixels);
        }

        let output = "";
        for (let r = 0; r < rows; r++) {
            for (let c = 0; c < cols; c++) {
                let pos_x = ~~(c * char_h);
                let pos_y = ~~(r * char_h);
                let avg = getBlockGray(pos_x, pos_y, ~~char_w, ~~char_h);
                let ch = map[avg];
                output += ch;
            }
            output += '\r\n';
        };
        return output;
    }

    private getCharsMap() {
        // let chars = [' ', '`', '.', '^', ',', ':', '~', '"', '<', '!', 'c', 't', '+', '{', 'i', '7', '?',
        //     'u', '3', '0', 'p', 'w', '4', 'A', '8', 'D', 'X', '%', '#', 'H', 'W', 'M',
        //     0, 5, 7, 9, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33, 35, 37, 39, 41, 43,
        //     45, 47, 49, 51, 53, 55, 59, 61, 63, 66, 68, 70];
        // chars.reverse();
        let chars = ['@', ' w ', ' # ', ' $ ', ' k ', ' d ', ' t ', ' j ', ' i ', ' . ', '   '];
        let step = 25;
        let map = {};
        for (let i = 0; i < 256; i++) {
            let index = ~~(i / 25)
            map[i] = chars[index];
        };
        return map;
    }

以白鹭官方logo图为例，结果如下：

原图：  ----->>>运行后：  

至于视频或者摄像成ASCII码的话，应该是开启手机相机权限，获取相机视频数据，按照一定帧率获取视频像素点数据，类似截屏，然后一张张解析成ASCII码的图片，最后类似放电影一样一张张轮播显示屏幕上就成视频啦。