/ javascript

Interesting Code

some thing interesting

友情提示,下面排版有点不清晰,欢迎前往原文地址

近日在 coding 时,突然蹦出一个想法 -- 让注释变得醒目且不失高大上

然后就是想到(想必你们也见过这样的情景)类似这样有趣的代码注释

1.佛祖保佑 永无BUG

         /*
                           _ooOoo_
                          o8888888o
                          88" . "88
                          (| -_- |)
                          O\  =  /O
                       ____/`---'\____
                     .'  \\|     |//  `.
                    /  \\|||  :  |||//  \
                   /  _||||| -:- |||||-  \
                   |   | \\\  -  /// |   |
                   | \_|  ''\---/''  |   |
                   \  .-\__  `-`  ___/-. /
                 ___`. .'  /--.--\  `. . __
              ."" '<  `.___\_<|>_/___.'  >'"".
             | | :  `- \`.;`\ _ /`;.`/ - ` : | |
             \  \ `-.   \_ __\ /__ _/   .-` /  /
        ======`-.____`-.___\_____/___.-`____.-'======
                           `=---='
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                 佛祖保佑       永无BUG
        */

2.草泥马

/*
*      
*          ┌─┐       ┌─┐
*       ┌──┘ ┴───────┘ ┴──┐
*       │                 │
*       │       ───       │
*       │  ─┬┘       └┬─  │
*       │                 │
*       │       ─┴─       │
*       │                 │
*       └───┐         ┌───┘
*           │         │
*           │         │
*           │         │
*           │         └──────────────┐
*           │                        │
*           │                        ├─┐
*           │                        ┌─┘    
*           │                        │
*           └─┐  ┐  ┌───────┬──┐  ┌──┘         
*             │ ─┤ ─┤       │ ─┤ ─┤         
*             └──┴──┘       └──┴──┘
*                 神兽保佑
*                 代码无BUG!
*/

3.PC

        /*
                     ,----------------,              ,---------,
                ,-----------------------,          ,"        ,"|
              ,"                      ,"|        ,"        ,"  |
             +-----------------------+  |      ,"        ,"    |
             |  .-----------------.  |  |     +---------+      |
             |  |                 |  |  |     | -==----'|      |
             |  |  I LOVE DOS!    |  |  |     |         |      |
             |  |  Bad command or |  |  |/----|`---=    |      |
             |  |  C:\>_          |  |  |   ,/|==== ooo |      ;
             |  |                 |  |  |  // |(((( [33]|    ,"
             |  `-----------------'  |," .;'| |((((     |  ,"
             +-----------------------+  ;;  | |         |,"
                /_)______________(_/  //'   | +---------+
           ___________________________/___  `,
          /  oooooooooooooooo  .o.  oooo /,   \,"-----------
         / ==ooooooooooooooo==.o.  ooo= //   ,`\--{)B     ,"
        /_==__==========__==_ooo__ooo=_/'   /___________,"

        */

...

...

...

无论如何这些一定不是人工敲出来的吧?!

可是

可是

可是

我就是找不到生成这些注释的工具,或许是我搜索的关键字不对吧,如有知道的还望告知

解决方案

嘿嘿嘿,找不到就自己撸一个。

大爱 JS + Canvas

原理

canvas 有一个叫 getImageData 的接口,通过该接口可以获取到画布上指定位置的全部像素的数据:

/*
 * ctx.getImageData(x, y, width, height);
 *
 * x, y 你所要获取区域的起始位置的坐标
 * width, height 你所要获取区域的宽高
 *
 */

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

console.log(ctx.getImageData(0, 0, 4, 4));

canvas-imagedata

如上图,data 是一个 Uint8ClampedArray 类型的一维数组,包含了整个图片区域里每个像素点的 RGBA 的整型数据,每一个色值占据 data 数组索引的一个位置,一个像素有个4个值(R、G、B、A)占据数组的4个索引位置,
所以只需判断 RGBA 中的A值是否大于 0 来判断( RGB 是三原色通道,A 表示透明度通道,即: Alpha,Alpha=0 时即为无色,255 是完全不透明)该像素点是否为画布中可见图像的一部分。

talk is cheap, let me show you code

核心代码

var str = '';

for(var i = 4, len = data.length; i <= len; i += 4) {
  if(data[i + 3] > 0) {
    result += '*';
  } else {
    result += ' ';
  }

  if(i%(this_code.width*4) === 0) {
    result += '\n';
  }
}

More And More

文字都可如此那么图片呢 ?

Of Course,let's do it.

原理依旧 show time:

/***
 * Function 制作注释文字
 * @param {Object} image 处理的图片对象
 * @param {Number} clarity 清晰度             default -> 30
 */
function createImageCode(image, clarity) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var data = [];
    var result = '';
    var proportion = image.width / image.height;  // 初始长宽比

    image.width = 80;
    image.height = image.width / proportion;

    canvas.setAttribute('width', image.width + 'px');
    canvas.setAttribute('height', image.height + 'px');

    ctx.drawImage(image, 0, 0, image.width, image.height);

    data = ctx.getImageData(0, 0, image.width  , image.width).data;

    for(var i = 4, len = data.length; i <= len; i += 4) {
      if(data[i + 2] < (clarity || 30)) {  // 如果需要高质量的效果,就有必要对 R,G,B,A 各值进行分类处理,就比如说 A 值小于 100 时填充符用 ‘?’, 大于 100 时填充符用 '-',等等。。。
        result += '?';
      } else {
        result += ' ';
      }

      if(i%(image.width*4) === 0) {
        result += '\n';
      }
    }
    
    return result;
}

Usage

完整源码 code.js

创建你的第一个有趣的注释内容

文字

var str = interestingCode.Str({
  str: '哈哈哈',
  fillchar: '!',
  blankchar: '='
});

console.log(str);

/*

==>

................................................................
................................................................
..............000...............000...............000...........
.....000000..00000.....000000..00000.....000000..00000..........
.....000000..000000....000000..000000....000000..000000.........
.....000000.000.0000...000000.000.0000...000000.000.0000........
.....00.000000...0000..00.000000...0000..00.000000...0000.......
.....00.00000000000000.00.00000000000000.00.00000000000000......
.....00.00000000000000.00.00000000000000.00.00000000000000......
.....00.000............00.000............00.000.................
.....00.000000000000...00.000000000000...00.000000000000........
.....00.000000000000...00.000000000000...00.000000000000........
.....000000000000000...000000000000000...000000000000000........
.....00000000.....00...00000000.....00...00000000.....00........
.....00....00.....00...00....00.....00...00....00.....00........
.....00....00.....00...00....00.....00...00....00.....00........
...........000000000.........000000000.........000000000........
...........000000000.........000000000.........000000000........
................................................................
................................................................
................................................................
................................................................
*/

图片

var image = new Image();

image.onload = function() {
  var str = interestingCode.Image(iamge);

  console.log(str);
};
image.src = 'your image url';


/*

==>

                                      
                                                                                
                                                                                
                                      ?                                         
                                      ? ?                                       
                                    ?????                                       
                                   ??????                                       
                                  ????????????                                  
                               ????         ????                                
                             ???                ??                              
                            ??                   ??                             
                           ??                      ?                            
                          ??                        ?                           
                         ??                         ??                          
                         ?                           ?                          
                        ?                    ??      ??                         
                        ?     ???????     ????????    ?                         
                       ??   ???     ??   ??      ??   ??                        
                       ?    ?         ? ??        ??   ?                        
                       ?   ?          ???          ?   ?                        
                      ??   ? ?         ?? ?        ?????                        
                      ?????? ??        ?? ??        ?????                       
                      ?????? ???       ?? ??        ?????                       
                      ???????          ???         ??????                       
                      ?   ??          ???          ??   ?                       
                      ?    ?          ????         ?    ?                       
                      ?    ??        ??  ??       ??    ?                       
                      ?     ??      ??    ???   ??      ?                       
                      ?      ????????      ??????       ?                       
                      ?                                 ?                       
                      ?                                 ?                       
                      ?                                 ?                       
                      ?                       ?         ??                      
                      ?                     ???         ??                      
                      ?                  ??   ?         ??                      
                      ?              ??     ??          ??                      
                      ??              ?   ???          ???                      
                      ? ?                ??           ?  ?                      
                      ?   ?                          ?   ?                      
                      ?     ?                      ?    ??                      
                     ?? ?    ??????????????????????    ? ??                     
                    ? ?  ?  ?                    ? ?  ?  ? ?                    
                   ?? ?    ?  ?                    ? ?   ?  ?                   
                   ?  ?    ??                     ? ?    ?  ?                   
                   ?  ?    ?       ?         ?      ?    ?   ?                  
                   ?  ?    ?       ?         ?      ?    ??  ?                  
                   ?  ??   ?       ?         ?      ?    ?   ?                  
                   ?? ??   ?       ?                ?    ?  ?                   
                    ????   ?       ?                ?    ???                    
                      ??   ?                ?       ?    ??                     
                       ??????       ?      ?        ??????                      
                       ?             ??   ?              ?                      
                       ?                            ?   ?                       
                       ??  ?                            ?                       
                        ? ?                          ? ??                       
                        ??                            ??                        
                         ?                            ?                         
                          ?                          ?                          
                           ??                      ??                           
                             ????              ????                             
                                ????????????????                                
                                  ?????? ??????                                 
                                ???????? ????????                               
                               ????????? ?????????                              
                               ????????? ?????????                              
                                ??????                                          
                                                                                

*/

Finally

附上可视化 UI 界面(其实图片的实现还是存在一些 bug 的,尽量选择颜色单调黑白分明的,效果会明显点)

启发文档: