关于JS动态生成简单图片

http://v3.bootcss.com/examples/dashboard/
今天学习bootstrap，参照上面的例子做几个固定底色的圆。

先下载bootstrap，查看dashboard实例的index.html

可以看到这几个圆来源docs.min.js，而且类型是图片
然后自己写一个html，引入bootstrap中的docs.min.js，页面写2个img

 圆形：<img data-src="holder.js/200x200/auto/vine" class="img-circle" >

 圆角方形：<img data-src="holder.js/200x200/auto/sky" class="img-rounded">

docs.min.js里实现的部分代码：

问题来了，看不懂，求解答，JS是怎么生成图片，页面img的src又要怎么写，这是什么
技术？能不能提供相关资料查看

它是生成SVG格式的你可以点击地址去看看

我看了一晚JQ那个插件了 关键字的是这里：

  K={settings:{domain:"holder.js",images:"img",objects:"object",
               bgnodes:"body .holderjs",stylenodes:"head link.holderjs",stylesheets:[],
               themes:{gray:{background:"#EEEEEE",foreground:"#AAAAAA"},
                social:{background:"#3a5a97",foreground:"#FFFFFF"},
                industrial:{background:"#434A52",foreground:"#C2F200"},
                sky:{background:"#0D8FDB",foreground:"#FFFFFF"},
                vine:{background:"#39DBAC",foreground:"#1E292C"},
                lava:{background:"#F8591A",foreground:"#1C2846"}}},
                defaults:{size:10,units:"pt",scale:1/16},flags:{dimensions:{regex:/^(\d+)x(\d+)$/,
                output:function(a){var b=this.regex.exec(a);return{width:+b[1],height:+b[2]}}},
                fluid:{regex:/^([0-9]+%?)x([0-9]+%?)$/,output:function(a)
                {var b=this.regex.exec(a);return{width:b[1],height:b[2]}}},
                colors:{regex:/(?:#|\^)([0-9a-f]{3,})\:(?:#|\^)([0-9a-f]{3,})/i,output:function(a)
                {var b=this.regex.exec(a);return{foreground:"#"+b[2],background:"#"+b[1]}}},
                text:{regex:/text\:(.*)/,output:function(a){return this.regex.exec(a)[1].replace("\\/","/")}},
                font:{regex:/font\:(.*)/,output:function(a){return this.regex.exec(a)[1]}},
                auto:{regex:/^auto$/},textmode:{regex:/textmode\:(.*)/,output:function(a){return this.regex.exec(a)[1]}},
                random:{regex:/^random$/},size:{regex:/size\:(\d+)/,

分别有 文字颜色 主题 默认 字体 随机 选择！！！ 获取SVG是这样的

当然需要修改主题颜色 就是背景的颜色就可以修改
sky:{background:"#0D8FDB",foreground:"#FFFFFF"},
vine:{background:"#39DBAC",foreground:"#1E292C"},
lava:{background:"#F8591A",foreground:"#1C2846"}}},
也可以自己按他们的写法去增加一个主题

 <img data-src="holder.js/180x180/text:66666/colors:#red/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">