ExtJs使用总结(非常详细)
转载 &更新时间：日 22:26:24 & 作者：
ExtJs使用总结(非常详细)，需要的朋友可以参考下
一、获取元素（Getting Elements） 1.Ext.get var el = Ext.get('myElementId');//获取元素，等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存。 注：享元模式（Flyweight Design Pattern）是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。 3.Ext.getDom var elDom = Ext.getDom('elId'); // 依据id来查dom节点 var elDom1 = Ext.getDom(elDom); // 依据dom节点来查dom节点 二、CSS元素 4.addClass Ext.fly('elId').addClass('myCls'); // 加入元素的'myCls'的样式 5.radioClass Ext.fly('elId').radioClass('myCls');//添加一个或多个className到这个元素，并移除其所有侧边（siblings）节点上的同名样式。 6.removeClass Ext.fly('elId').removeClass('myCls'); // 移除元素的样式 7.toggleClass Ext.fly('elId').toggleClass('myCls'); // 加入样式 Ext.fly('elId').toggleClass('myCls'); // 移除样式 Ext.fly('elId').toggleClass('myCls'); // 再加入样式 8.hasClass if (Ext.fly('elId').hasClass('myCls')) {//判断是否已加上这个样式 // 是有样式的…… } 10.replaceClass Ext.fly('elId').replaceClass('myClsA', 'myClsB');//替换样式 11.getStyle var color = Ext.fly('elId').getStyle('color');//返回该元素的统一化当前样式和计算样式。 var zIndx = Ext.fly('elId').getStyle('z-index');//返回该元素的统一化当前样式和计算样式。 12.setStyle Ext.fly('elId').setStyle({ display : 'block', overflow : 'hidden', cursor : 'pointer' });//设置元素的样式，也可以用一个对象参数包含多个样式。 13.getColor Ext.fly('elId').getColor('color');//为指定的CSS属性返回CSS颜色 14.setOpacity Ext.fly('elId').setOpacity(.45, true);//设置元素的透明度。 15.clearOpacity Ext.fly('elId').clearOpacity();//清除这个元素的透明度设置 三、Dom游历 16.Ext.fly('elId').select('li:nth-child(2n)').addClass('red'); 17.is 测试当前元素是否与传入的选择符相符一致。
代码如下: var el = Ext.get('elId'); if (el.is('p.myCls')) { // 条件成立 }
18.findParent 定位于此节点，以此节点为起点，向外围搜索外层的父节点，搜索条件必须符合并匹配传入的简易选择符。 Ext.fly('elId').findParent('div'); // 返回dom节点 Ext.fly('elId').findParent('div', 4); // 查找4个节点 Ext.fly('elId').findParent('div', null, true); // 返回Ext.Element 19.findParentNode 定位于此节点的“父节点”，以此节点的“父节点”为起点，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符。 Ext.fly('elId').findParentNode('div'); 20.up 沿着DOM，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符。 Ext.fly('elId').up('div'); Ext.fly('elId').up('div', 5); // 限5层的内查找 21.select 传入一个CSS选择符的参数，然后依据该CSS选择符从当前元素下面，形成期待匹配子节点的集合，也就是“选择”的操作，最后以一个Ext.CompositeElement类型的组合元素的形式返回。如果以Ext.select()调用表示从document可是搜索。 // 返回结果的CompositeElement Ext.fly('elId').select('div:nth-child(2)'); // 返回数组 Ext.fly('elId').select('div:nth-child(2)', true); // 整个document都会搜索 Ext.select('div:nth-child(2)'); 22.query 进行一次query的查询，返回DOM 节点组成的数组。可选地第二参数设置为查询的起点，如不指定则为 document。 // 返回dom节点组成的数组 Ext.query('div:nth-child(2)'); 23.child 基于送入的选择符，不限定深度进行搜索，符合的话选取单个子节点。 Ext.fly('elId').child('p.highlight'); // 返回的类型是Ext.Element Ext.fly('elId').child('p.highlight', true); // 返回dom节点 24.down 基于该选择符，"直接"选取单个子节点。 Ext.fly('elId').down('span'); // 返回的类型是Ext.Element Ext.fly('elId').down('span', true); // 返回dom节点 25.parent 返回当前节点的那个父节点，可选地可送入一个期待的选择符。 // 返回父节点，类型是Ext.Element Ext.fly('elId').parent(); // 返回父节点，类型是html dom Ext.fly('elId').parent("", true); // 返回父级节点，但一定要是div的，找到就返回，类型是Ext.Element Ext.fly('elId').parent("div"); 26.next 获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。 // 返回下一个侧边节点，类型是Ext.Element Ext.fly('elId').next(); // 返回下一个侧边节点，类型是html dom Ext.fly('elId').next("", true); // 返回下一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element Ext.fly('elId').next("div"); 27.prev 获取上一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。 // 返回上一个侧边节点，类型是Ext.Element Ext.fly('elId').prev(); // 返回上一个侧边节点，类型是html dom Ext.fly('elId').prev("", true); // 返回上一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element Ext.fly('elId').prev("div"); 28.first 获取第一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。 // 返回第一个侧边节点，类型是Ext.Element Ext.fly('elId').first(); // 返回第一个侧边节点，类型是html dom Ext.fly('elId').first("", true); // 返回第一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element Ext.fly('elId').first("div"); 29.last 获取最后一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。 // 返回最后一个侧边节点，类型是Ext.Element Ext.fly('elId').last(); // 返回最后一个侧边节点，类型是html dom Ext.fly('elId').last("", true); // 返回最后一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element Ext.fly('elId').last("div"); 四、DOM操控（DHTML常见的一项任务就是DOM元素的增、删、改、查） 30.appendChild 把送入的元素归为这个元素的子元素。 var el = Ext.get('elId1'); // 用id指定 Ext.fly('elId').appendChild('elId2'); // Ext.Element添加 Ext.fly('elId').appendChild(el); // 选择符组合地添加 Ext.fly('elId').appendChild(['elId2','elId3']); // 直接添加dom节点 Ext.fly('elId').appendChild(el.dom); // 添加CompositeElement，一组的div Ext.fly('elId').appendChild(Ext.select('div')); 31.appendTo 把这个元素添加到送入的元素里面。 var el = Ext.get('elId1'); // 'elId'添加到'elId2'里面 Ext.fly('elId').appendTo('elId2'); Ext.fly('elId').appendTo(el); // 添加到Ext.Element el 32.insertBefore 传入一个元素的参数，将其放置在当前元素之前的位置。 var el = Ext.get('elId1'); // dom节点在前面插入 Ext.fly('elId').insertBefore('elId2'); //Ext.Element el在前面插入 Ext.fly('elId').insertBefore(el); 33.insertAfter 传入一个元素的参数，将其放置在当前元素之后的位置。 var el = Ext.get('elId1'); // dom节点在后面插入 Ext.fly('elId').insertAfter('elId2'); // Ext.Element el在后面插入 Ext.fly('elId').insertAfter(el); 34.insertFirst 可以是插入一个元素，也可以是创建一个元素（要创建的话请使用“DomHelper配置项对象”作为参数传入），总之，这个元素作为当前元素的第一个子元素出现。 var el = Ext.get('elId1'); // 插入的dom节点作为第一个元素 Ext.fly('elId').insertFirst('elId2'); // 插入的Ext.Element作为第一个元素 Ext.fly('elId').insertFirst(el); // 用DomHelper配置项创建新节点，新节点会作为第一个子元素被插入。 Ext.fly('elId').insertFirst({ tag: 'p', cls: 'myCls', html: 'Hi I am the new first child' }); 35.replace 用于当前这个元素替换传入的元素。 var el = Ext.get('elId1'); // 'elId'去替换'elId2' Ext.fly('elId').replace('elId2'); // 'elId'去替换'elId1' Ext.fly('elId').replace(el); 36.replaceWith 用传入的元素替换这个元素。参数可以是新元素或是要创建的DomHelper配置项对象。 var el = Ext.get('elId1'); Ext.fly('elId').replaceWith('elId2'); // 'elId2'替换掉'elId'. Ext.fly('elId').replaceWith(el); // 'elId1'替换掉'elId' // 用DomHelper配置项创建新节点，并用该节点换掉‘elId'。 Ext.fly('elId').replaceWith({ tag: 'p', cls: 'myCls', html: 'Hi I have replaced elId' }); 五、DomHelper配置项 37.createChild 传入一个DomHelper配置项对象的参数，将其创建并加入到该元素。 var el = Ext.get('elId'); var dhConfig = { tag: 'p', cls: 'myCls', html: 'Hi I have replaced elId' }; // 创建新的节点，放到'elId'里面 el.createChild(dhConfig); // 创建新的节点，居el第一个子元素之前 el.createChild(dhConfig, el.first()); 38.wrap 创建一个新的元素，包裹在当前元素外面。 Ext.fly('elId').wrap(); // div包着elId // 用新建的一个元素来包着elId Ext.fly('elId').wrap({ tag: 'p', cls: 'myCls', html: 'Hi I have replaced elId' }); 六、Html片断 38.insertHtml 插入HTML片断到这个元素。至于要插入的html放在元素的哪里，你可指定beforeBegin, beforeEnd, afterBegin, afterEnd这几种。第二个参数是插入HTML片断，第三个参数是决定是否返回一个Ext.Element类型的DOM对象。 Ext.fly('elId').insertHtml( 'beforeBegin', '&p&&a href="anotherpage.html'&点击我&/a&&/p&' ); // 返回dom节点 Ext.fly('elId').insertHtml( 'beforeBegin', '&p&&a href="anotherpage.html'&点击我&/a&&/p&', true ); // 返回Ext.Element 39.remove 从DOM里面移除当前元素，并从缓存中删除。. Ext.fly('elId').remove(); // elId在缓存和dom里面都没有 40.removeNode 移除document的DOM节点。如果是body节点的话会被忽略。 Ext.removeNode(node); // 从dom里面移除(HTMLElement) 七、Ajax 41.load 直接访问Updater的Ext.Updater.update()方法（相同的参数）。参数与Ext.Updater.update()方法的一致。 Ext.fly('elId').load({url: 'serverSide.php'}) 42.getUpdater 获取这个元素的UpdateManager。 var updr = Ext.fly('elId').getUpdater(); updr.update({ url: 'http://myserver.com/index.php', params: { param1: "foo", param2: "bar" } }); 八、事件控制Event Handling 43.addListener/on 为此元素加入一个事件处理函数。on()是其简写方式。简写方式作用等价，写代码时更省力。 var el = Ext.get('elId'); el.on('click', function(e,t) { // e是一个标准化的事件对象(Ext.EventObject) // t就是点击的目标元素，这是个Ext.Element. // 对象指针this也指向t }); 44.removeListener/un 从这个元素上移除一个事件处理函数。un()是它的简写方式。 var el = Ext.get('elId'); el.un('click', this.handlerFn); // 或 el.removeListener('click', this.handlerFn); 45.Ext.EventObject EventObject呈现了统一各浏览器的这么一个事件模型，并尽量符合W3C的标准方法。 // e它不是一个标准的事件对象，而是Ext.EventObject。 function handleClick(e){ e.preventDefault(); var target = e.getTarget(); ... } var myDiv = Ext.get('myDiv'); myDiv.on("click", handleClick); // 或 Ext.EventManager.on('myDiv', 'click', handleClick); Ext.EventManager.addListener('myDiv', 'click', handleClick); 九、高级事件功能 46.委托delegation 要使用事件委托的方式代替，在容器身上登记一个事件处理器，按照依附的逻辑选择： Ext.fly('actions').on('click, function(e,t) { switch(t.id) { case ''btn-edit': // 处理特定元素的事件具体过程
case 'btn-delete': // 处理特定元素的事件具体过程
case 'btn-cancel': // 处理特定元素的事件具体过程
} }); 47.委托化delegate 你在登记事件的处理器的时候可以加入配置这个选项。一个简易选择符，用于过滤目标元素，或是往下一层查找目标的子孙。 el.on('click', function(e,t) { // 执行事件具体过程 }, this, { // 对子孙'clickable'有效 delegate: '.clickable' }); 48.翻转hover 这是一个Ext的翻转菜单的实例： // handles when the mouse enters the element function enter(e,t){ t.toggleClass('red'); } // handles when the mouse leaves the element function leave(e,t){ t.toggleClass('red'); } // subscribe to the hover el.hover(over, out); 49.移除事件句柄removeAllListeners 在该元素身上移除所有已加入的侦听器。 el.removeAllListeners(); 50.是否一次性触发single 你在登记事件的处理器的时候可以加入配置这个选项。true代表为事件触发后加入一个下次移除本身的处理函数。 el.on('click', function(e,t) { // 执行事件具体过程 }, this, { single: true // 触发一次后不会再执行事件了 }); 51.缓冲buffer 你在登记事件的处理器的时候可以加入配置这个选项。若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会被启用，但是新处理器句柄会安排在其位置。 el.on('click', function(e,t) { // 执行事件具体过程 }, this, { buffer: 1000 // 重复响应事件以一秒为时间间隔 }); 52.延时delay 你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后处理函数延时执行的时间。 el.on('click', function(e,t) { // 执行事件具体过程 }, this, { // 延迟事件，响应事件后开始计时（这里一秒） delay: 1000 }); 53.目标target 你在登记事件的处理器的时候可以加入配置这个选项。如果你想另外指定另外一个目标元素，你可以在这个配置项上面设置。这可保证在事件上报阶段中遇到这个元素才会执行这个处理函数。
代码如下:el.on('click', function(e,t) { // 执行事件具体过程 }, this, { // 遇到里头的第一个'div'才会触发事件 target: el.up('div') }); 十、尺寸&大小 54.getHeight 返回元素的偏移（offset）高度。 var ht = Ext.fly('elId').getHeight(); 55.getWidth 返回元素的偏移（offset）宽度。 var wd = Ext.fly('elId').getWidth(); 56.setHeight 设置元素的高度。 Ext.fly('elId').setHeight(); 57.setWidth 设置元素的宽度。 Ext.fly('elId').setWidth(); 58.getBorderWidth 返回指定边（side(s)）的padding宽度。 var bdr_wd = Ext.fly('elId').getBorderWidth('lr'); 59.getPadding 可以是t, l, r, b或是任何组合。例如，传入lr的参数会得到(l)eft padding +(r)ight padding。 var padding = Ext.fly('elId').getPadding('lr'); 60.clip 保存当前的溢出（overflow），然后进行裁剪元素的溢出部分 - 使用unclip()来移除。 Ext.fly('elId').clip(); 61.unclip 在调用clip()之前，返回原始的裁剪部分（溢出的）。 Ext.fly('elId').unclip(); 62.isBorderBox 测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。 if (Ext.isBorderBox) { // } 十一、定位 63.getX 返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。 var elX = Ext.fly('elId').getX() 64.getY 返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。 var elY = Ext.fly('elId').getY() 65.getXY 返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。 var elXY = Ext.fly('elId').getXY() // elXY是数组 66.setX 返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。 Ext.fly('elId').setX(10) 67.setY 返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。 Ext.fly('elId').setY(10) 68.setXY 返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。 Ext.fly('elId').setXY([20,10]) 69.getOffsetsTo 返回当前元素与送入元素的距离。这两个元素都必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。 var elOffsets = Ext.fly('elId').getOffsetsTo(anotherEl); 70.getLeft 获取左边的X坐标。 var elLeft = Ext.fly('elId').getLeft(); 71.getRight 获取元素右边的X坐标（元素X位置 + 元素宽度）。 var elRight = Ext.fly('elId').getRight(); 72.getTop 获取顶部Y坐标。 var elTop = Ext.fly('elId').getTop(); 73.getBottom 获取元素的底部Y坐标（元素Y位置 + 元素宽度）。 var elBottom = Ext.fly('elId').getBottom(); 74.setLeft 直接使用CSS样式（代替setX()），设定元素的left位置。 Ext.fly('elId').setLeft(25) 75.setRight 设置元素CSS Right的样式。 Ext.fly('elId').setRight(15) 76.setTop 直接使用CSS样式（代替setY()），设定元素的top位置。 Ext.fly('elId').setTop(12) 77.setBottom 设置元素CSS Bottom的样式。 Ext.fly('elId').setBottom(15) 78.setLocation 无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。 Ext.fly('elId').setLocation(15,32) 79.moveTo 无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。 Ext.fly('elId').moveTo(12,17) 80.position 初始化元素的位置。如果未传入期待的位置，而又还没定位的话，将会设置当前元素为相对（relative）定位。 Ext.fly('elId').position("relative") 81.clearPositioning 当文档加载后清除位置并复位到默认。 Ext.fly('elId').clearPositioning() Ext.fly('elId').clearPositioning("top") 82.getPositioning 返回一个包含CSS定位信息的对象。有用的技巧：连同setPostioning一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元素。 var pos = Ext.fly('elId').getPositioning() 83.setPositioning 由getPositioning()返回的对象去进行定位。 Ext.fly('elId').setPositioning({ left: 'static', right: 'auto' }) 84.translatePoints 送入一个页面坐标的参数，将其翻译到元素的CSS left/top值。 // {left:translX, top: translY} var points = Ext.fly('elId').translatePoints(15,18);
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具「Keras」完整实现‘交通标志’分类、‘票据’分类两个项目「Keras」完整实现‘交通标志’分类、‘票据’分类两个项目机翼技术百家号我们一般用深度学习做图片分类的入门教材都是MNIST或者CIFAR-10，因为数据都是别人准备好的，有的甚至是一个函数就把所有数据都load进来了，所以跑起来都很简单，但是跑完了，好像自己还没掌握图片分类的完整流程，因为他们没有经历数据处理的阶段，所以谈不上走过一遍深度学习的分类实现过程。今天我想给大家分享两个比较贴近实际的分类项目，从数据分析和处理说起，以Keras为工具，彻底掌握图像分类任务。这两个分类项目就是：交通标志分类和票据分类。交通标志分类在无人驾驶或者与交通相关项目都有应用，而票据分类任务就更加贴切生活了，同时该项目也是我现在做的一个大项目中的子任务。这两个分类任务都是很贴近实际的练手好项目，希望经过这两个实际任务可以掌握好Keras这个工具,并且搭建一个用于图像分类的通用框架，以后做其他图像分类项目也可以得心应手。先说配置环境：Python 3.5Keras==2.0.1,TesnsorFlow后端，CPU训练一、交通标志分类首先是观察数据，看看我们要识别的交通标志种类有多少，以及每一类的图片有多少。打开一看，这个交通标志的数据集已经帮我们分出了训练集和数据集。每个文件夹的名字就是其标签。每一类的标志图片数量在十来张到数十张，是一个小数据集，总的类别是62。那我们开始以Keras为工具搭建一个图片分类器通用框架。搭建用深度学习做图片分类选的网络肯定是卷积神经网络，但是现在种类这么多，哪一个会在我们这个标志分类任务表现最好？在实验之前，没有人会知道。一般而言，先选一个最简单又最经典的网络跑一下看看分类效果是的策略是明智的选择，那么LeNet肯定是最符合以上的要求啦，实现简单，又相当经典。那我们先单独写一个lenet.py的文件，然后实现改进版的LeNet类。其中conv2d表示执行卷积，maxpooling2d表示执行最大池化，Activation表示特定的激活函数类型，Flatten层用来将输入“压平”，用于卷积层到全连接层的过渡，Dense表示全连接层（500个神经元）。参数解析器和一些参数的初始化首先我们先定义好参数解析器。我们还需要为训练设置一些参数，比如训练的epoches，batch_szie等。这些参数不是随便设的，比如batch_size的数值取决于你电脑内存的大小，内存越大，batch_size就可以设为大一点。又比如norm_size（图片归一化尺寸）是根据你得到的数据集，经过分析后得出的，因为我们这个数据集大多数图片的尺度都在这个范围内，所以我觉得32这个尺寸应该比较合适，但是不是最合适呢？那还是要通过实验才知道的，也许64的效果更好呢？载入数据接下来我们需要读入图片和对应标签信息。函数返回的是图片和其对应的标签。训练在这里我们使用了Adam优化器，由于这个任务是一个多分类问题，可以使用类别交叉熵（categorical_crossentropy）。但如果执行的分类任务仅有两类，那损失函数应更换为二进制交叉熵损失函数（binary cross-entropy）主函数在正式训练之前我们还使用了数据增广技术（ImageDataGenerator）来对我们的小数据集进行数据增强（对数据集图像进行随机旋转、移动、翻转、剪切等），以加强模型的泛化能力。训练代码已经写好了，接下来开始训练（图片归一化尺寸为32，batch_size为32，epoches为35）。训练过程：Loss和Accuracy:从训练效果看来，准确率在94%左右，效果不错了。预测单张图片现在我们已经得到了我们训练好的模型traffic_sign.model，然后我们编写一个专门用于预测的脚本predict.py。# import the necessary packagesfrom keras.preprocessing.imageimport img_to_arrayfrom keras.models import load_modelimport numpy as npimport argparseimport imutilsimport cv2norm_size = 32def args_parse():# construct the argument parse and parse the arguments ap = argparse.ArgumentParser() ap.add_argument("-m", "--model", required=True, help="path to trained model model") ap.add_argument("-i", "--image", required=True, help="path to input image") ap.add_argument("-s", "--show", action="store_true", help="show predict image",default=False) args = vars(ap.parse_args())
return args def predict(args): # load the trained convolutional neural network print("[INFO] loading network...") model = load_model(args["model"])
#load the image image = cv2.imread(args["image"]) orig = image.copy()
# pre-process the image for classification image = cv2.resize(image, (norm_size, norm_size)) image = image.astype("float") / 255.0 image = img_to_array(image) image = np.expand_dims(image, axis=0)
# classify the input image result = model.predict(image)[0] #print (result.shape) proba = np.max(result) label = str(np.where(result==proba)[0]) label = "{}: {:.2f}%".format(label, proba * 100) print(label)
if args['show']:
# draw the label on the image output = imutils.resize(orig, width=400) cv2.putText(output, label, (10, 25),cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 255, 0), 2)
# show the output image cv2.imshow("Output", output) cv2.waitKey(0)#python predict.py --model traffic_sign.model -i ../2.png -sif __name__ == '__main__': args = args_parse() predict(args)预测脚本中的代码编写思路是：参数解析器-》载入训练好的模型-》读入图片信息-》预测-》展示预测效果。值得注意的是，参数-s是用于可视化结果的，加上他的话我们就可以看出我们输入的图片以及模型预测的分类结果，很直观。如果只需要得到分类结果，不加-s就可以了。单张图片的预测：python predict.py --model traffic_sign.model -i ../2.png -s至此，交通分类任务完成。这里分享一下这个项目的数据集来源：你可以点击这里下载数据集。在下载页面上面有很多的数据集，但是你只需要下载 BelgiumTS for Classification (cropped images) 目录下面的两个文件：BelgiumTSC_Training (171.3MBytes)BelgiumTSC_Testing (76.5MBytes)值得注意的是，原始数据集的图片格式是ppm，这是一种很老的图片保存格式，很多的工具都已经不支持它了。这也就意味着，我们不能很方便的查看这些文件夹里面的图片。为了解决这个问题，我用opencv重新将这些图片转换为png格式，这样子我们就能很直观地看到数据图片了。转换脚本在这里同时我也把转换好的数据集传到百度云了，不想自己亲自转换的童鞋可以自行获取。在公众号 datadw 里 回复图片分类 即可获取链接。二、票据分类先分析任务和观察数据。我们这次的分类任务是票据分类，现在我们手头上的票据种类一共有14种，我们的任务就是训练一个模型将他们一一分类。先看看票据的图像吧。票据种类一共14种，其图片名字就是其label。票据是以下面所示的文件夹排布存储的。然后我们再看一下每类图片数据的情况，看一下可利用的数据有多少。有的票据数据比较少，也就十来张有的票据比较多，有上百张这样的数据分布直接拿去去训练的话，效果可能不会太好（这就是不平衡问题），但是这是后期模型调优时才需要考虑的问题，现在先放一边。那我们继续使用上面的图片分类框架完成本次的票据分类任务。这次的数据集的存储方式与交通标志分类任务的数据存储不太一样，这个数据集没有把数据分成train和test两个文件夹，所以我们在代码中读取数据时写的函数应作出相应修改：我们先读取所有图片，再借助sklearn的“train_test_split”函数将数据集以一定比例分为训练集和测试集。我写了个load_data2()函数来适应这种数据存储。def load_data2(path): print("[INFO] loading images...") data = [] labels = [] # grab the image paths and randomly shuffle them imagePaths = sorted(list(paths.list_images(path))) random.seed(42) random.shuffle(imagePaths) # loop over the input images for imagePath in imagePaths: # load the image, pre-process it, and store it in the data list image = cv2.imread(imagePath) image = cv2.resize(image, (norm_size, norm_size)) image = img_to_array(image) data.append(image) # extract the class label from the image path and update the # labels list label = int(imagePath.split(os.path.sep)[-2])
labels.append(label)
# scale the raw pixel intensities to the range [0, 1] data = np.array(data, dtype="float") / 255.0 labels = np.array(labels) # partition the data into training and testing splits using 75% of # the data for training and the remaining 25% for testing (trainX, testX, trainY, testY) = train_test_split(data, labels, test_size=0.25, random_state=42) # convert the labels from integers to vectors trainY = to_categorical(trainY, num_classes=CLASS_NUM) testY = to_categorical(testY, num_classes=CLASS_NUM)
return trainX,trainY,testX,testY我们使用了sklearn中的神器train_test_split做了数据集的切分，非常方便。可以看出，load_data2()的返回值就是训练集图片和标注+测试集图片和标注。在主函数也只需做些许修改就可以完成本次票据分类任务。if __name__=='__main__': args = args_parse() file_path = args["dataset"] trainX,trainY,testX,testY = load_data2(file_path) # construct the image generator for data augmentation aug = ImageDataGenerator(rotation_range=30, width_shift_range=0.1, height_shift_range=0.1, shear_range=0.2, zoom_range=0.2, horizontal_flip=True, fill_mode="nearest") train(aug,trainX,trainY,testX,testY,args)然后设定一些参数，比如图片归一化尺寸为64*64，训练35个epoches。设定完参数后我们开始训练。python train.py --dataset ../../invoice_all/train --model invoice.model训练的过程不算久，大概十来分钟。训练过程如下：绘制出Loss和Accuracy曲线，可以看出，我们训练后的模型的准确率可以达到97%。直接使用一个LeNet网络就可以跑出这个准确率还是让人很开心的。最后再用训练好的模型预测单张票据，看看效果：预测正确，deep learning 票据分类任务完成！三、总结我们使用了Keras搭建了一个基于LeNet的图片分类器的通用框架，并用它成功完成两个实际的分类任务。最后再说说我们现有的模型的一些改进的地方吧。第一，图片归一化的尺寸是否合适？比如票据分类任务中，图片归一化为64，可能这个尺寸有点小，如果把尺寸改为128或256，效果可能会更好；第二，可以考虑更深的网络，比如VGG,GoogLeNet等；第三，数据增强部分还可以再做一做。via http://www.cnblogs.com/skyfsm/p/051705.html免责声明：转载自网络 不用于商业宣传 版权归原作者所有 侵权删本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。机翼技术百家号最近更新：简介:注重智能生活和尖端科技作者最新文章相关文章