fatkun's blog » 网页前端

Fatkun图片批量下载谷歌浏览器扩展1.3版更新了

fatkun — Tue, 01 May 2012 14:00:51 +0000

1.3版插件地址：https://bath-image-download.googlecode.com/files/batch1_3.crx

1.3版update:2012-05-01

支持特定网站取大图，添加新浪微博和新浪轻博客的支持
支持input图片
添加视图切换

最近工作上有点忙，先做一个小更新。有好多东西要学，是压力也是动力~！

详细信息：http://fatkun.com/2010/09/batch-image-download.html

Extjs3 PagingToolbar下拉框分页插件

fatkun — Sun, 11 Mar 2012 17:37:40 +0000

Extjs PagingToolbar下拉框分页插件

Ext.namespace('Ext.ui.plugins');
 
 Ext.ui.plugins.ComboPageSize = function(config) {
     Ext.apply(this, config);
 };
 
 Ext.extend(Ext.ui.plugins.ComboPageSize, Ext.util.Observable, {
 
     pageSizes: [25, 50, 100, 200, 500],
     prefixText: '每页显示',
     postfixText: '条',
     addToItem: true,    //true添加到items中去，配合index；false则直接添加到最后
     index: 10,           //在items中的位置
     init: function(pagingToolbar) {
         var ps = this.pageSizes;
         var combo = new Ext.form.ComboBox({
             typeAhead: true,
             triggerAction: 'all',
             lazyRender: true,
             mode: 'local',
             width: 80,
             store: ps,
             enableKeyEvents: true,
             editable: false,
             loadPages: function() {
                 var rowIndex = 0;
                 var gp = pagingToolbar.findParentBy(
                                 function(ct, cmp) { return (ct instanceof Ext.grid.GridPanel) ? true : false; }
                               );
                 var sm = gp.getSelectionModel();
                 if (undefined != sm && sm.hasSelection()) {
                     if (sm instanceof Ext.grid.RowSelectionModel) {
                         rowIndex = gp.store.indexOf(sm.getSelected());
                     } else if (sm instanceof Ext.grid.CellSelectionModel) {
                         rowIndex = sm.getSelectedCell()[0];
                     }
                 }
                 rowIndex += pagingToolbar.cursor;
                 pagingToolbar.doLoad(Math.floor(rowIndex / pagingToolbar.pageSize) * pagingToolbar.pageSize);
             },
             listeners: {
                 select: function(c, r, i) {
                     pagingToolbar.pageSize = ps[i];
                     this.loadPages();
                 },
                 blur: function() {
                     var pagesizeTemp = Number(this.getValue());
                     if (isNaN(pagesizeTemp)) {
                         this.setValue(pagingToolbar.pageSize);
                         return;
                     }
                     pagingToolbar.pageSize = Number(this.getValue());
                     this.loadPages();
                 }
             }
         });
         if (this.addToItem) {
             var inputIndex = this.index;
             if (inputIndex > pagingToolbar.items.length) inputIndex = pagingToolbar.items.length;
             pagingToolbar.insert(++inputIndex, '-');
             pagingToolbar.insert(++inputIndex, this.prefixText);
             pagingToolbar.insert(++inputIndex, combo);
             pagingToolbar.insert(++inputIndex, this.postfixText);
         }
         else {
             pagingToolbar.add('-');
             pagingToolbar.add(this.prefixText);
             pagingToolbar.add(combo);
             pagingToolbar.add(this.postfixText);
         }
         pagingToolbar.on({
             beforedestroy: function() {
                 combo.destroy();
             },
             change: function() {
                 combo.setValue(pagingToolbar.pageSize);
 
             }
         });
 
     }
 })

使用方法

                bbar: new Ext.PagingToolbar({
                    plugins: new Ext.ui.plugins.ComboPageSize(),
                    pageSize: myPageSize,
                    displayInfo : true,
                    displayMsg : '当前记录数: {0} - {1} 总记录数: {2}',   
                    emptyMsg : '没有符合条件的记录',   
                    store : config.store
                })

来源：Ext.PagingToolbar设置每页显示条数插件
作者还有个滑动条改变分页的，赞，链接过去看吧。

Fatkun图片批量下载谷歌浏览器扩展1.2版更新

fatkun — Sun, 04 Mar 2012 14:55:44 +0000

Fatkun图片批量下载1.2版更新了！

首先，特别感谢三位朋友的捐赠，谢谢你们的鼓励！这是我人生中第一次收到的捐赠，非常感谢你们！

欢迎使用Fatkun图片批量下载1.2版，有以下更新：

增加了针对特定网站获取大图片，现在支持topit.me和mmfuli.com，后期会继续增加其他网站的支持
图片分批次获取图片大小
添加新浪微博分享

这个扩展虽然功能还不算很强大，但依然花费了我一些时间来完善它，如果你认为这个扩展对你有用并且愿意支持作者开发，点此捐助作者，或者向身边的朋友推荐这个扩展，谢谢。

topit.me和mmfuli.com这两个网站，可以去试试。

mmfuli的要进到图片列表的目录才有效果哦。。如下面的网址。

http://mmfuli.com/beautyleg/no550_kate

为什么要针对特定网站获取大图片呢？因为有些图片是要打开页面才能看到大图片的，不过对于部分图片，缩略图和大图存在一些关系，我们可以把这关系找出来，然后进行替换。

考虑到编写替换规则有困难（需要了解js，正则表达式），暂时还是由我在日后更新中添加更多网站的支持。

js模拟限制图片同时下载个数(使用setTimeout)

fatkun — Sat, 03 Mar 2012 13:24:15 +0000

浏览器默认会对同一域名的图片有一个限制同时最多下载X个图片，但是如果图片是多域名的，有时候就会同时下载了很多图片，导致有些图片下载失败！
先来看一段代码：

<script language="javascript">
 
    // 构造一些不同子域名的图片链接
    url = '.topit.me/4/cf/69/1130159413c3c69cf4l.jpg';
    var array = [];
    var hex = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
    for (var i=0; i < 20; i++) {
        var index = hex[i % 15];
        array.push('http://i' + index + url + '?time=' + i);
    }
 
    console.log(array);
 
    for (var i=0; i < array.length; i++) {
        var img = new Image();
        img.onload = function() {
            console.log('onload', this.src);
        }
        img.onerror = function() {
            console.log('onerror', this.src);
        }
        img.src = array[i];
        console.log('array[i]', array[i]);
    }
 
script>

这段代码模拟网页打开时加载图片，一次性给浏览器加载N个图片。
把代码保存为html文件，在chrome浏览器打开。
可以在控制台network看到图片的加载，如果是同一域名下，会限制X个图片同时下载，但不同域名就会看到一堆的图片在下载了，还有些图片下载失败了。

需求

我们需要人为限制一下图片同时下载的个数！并且分批来完成下载所有图片。

思路

有点像消费者/生产者模式，有一个生产者（目前已经生产了产品啦，就是一堆图片url），然后就有多个消费者去消费（拿url去下载图片）
利用一个数组来模拟队列~然后取吧。。

实现

<script language="javascript">
 
    // 构造一些不同子域名的图片链接
    url = '.topit.me/4/cf/69/1130159413c3c69cf4l.jpg';
    var array = [];
    var hex = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
    for (var i=0; i < 20; i++) {
        var index = hex[i % 15];
        array.push('http://i' + index + url + '?time=' + i);
    }
 
    console.log(array);
 
    var QueneEnginer = function(){
        this.Quene = [];
    }
 
    QueneEnginer.prototype = {
        processTime: 100,
        loadNum: 0,
        maxDownloadNum: 5,
        add: function(arr) {
            for (var i=0; i < arr.length; i++) {
                this.Quene.push(arr[i]);
            }
        },
        start: function() {
            var that = this;
            setTimeout(function() {that.process();}, that.processTime);
        }, 
        process: function() {
            var that = this;
            if (this.Quene.length > 0) {
                while (this.loadNum < this.maxDownloadNum) { // 如果有空位，就加载图片吧
                    var url = this.Quene.shift(); // 从数组取一个出来吧
                    if (url == null) {break;} // 取完了就中断
                    this.loadNum++;// 标记一下，我要开始下载咯
                    this.loadPic(url, function(src) {
                        document.write(src + '
');
                        that.loadNum--; // 加载完图片记得减一哦
                        console.log('callback');
                    });
                }
                this.start(); // 这里是重点，利用了setTimeout，不断的循环，直到this.Quene.length <= 0
            }
        }, 
        loadPic: function(url, callback) { //加载图片，实现callback为了回调计数
            var img = new Image();
            img.onload = function() {
                console.log('onload', this.src);
                callback(this.src);
            }
            img.onerror = function() {
                console.log('onerror', this.src);
                callback(this.src);
            }
            img.src = url;
            console.log('array[i]', url);
        }
    }
 
    var qe = new QueneEnginer();
    qe.add(array);
    qe.start();
 
script>

Fatkun图片批量下载谷歌浏览器扩展1.0版更新了！

fatkun — Thu, 02 Feb 2012 16:25:28 +0000

乱码的问题今天晚上更新，非常抱歉。将会自动更新，不需要任何操作。

已更新到服务器，可以等自动更新也可以下载下面链接立即更新。

（尝试解决乱码）1.1版插件地址：https://bath-image-download.googlecode.com/files/batch1_1.crx

Fatkun图片批量下载谷歌浏览器扩展是一个从网页批量下载图片的扩展，提供方便简单的筛选功能，快速的批量下载图片。

1.0版update:2012-02-03

完全重构了一次代码，以前的代码写的很乱，趁春节在家重写一遍代码
支持框架网页获取图片（例如猫扑）
支持直接链接是图片的文本链接图片
重新自己画了一个图标：）

下一次更新将加入一些特定代码针对特定网站取得大图片。

做这个扩展，刚开始是因为当时的扩展并不好用，自己写了一个简单的自己用着爽。现在还花时间更新这个扩展，一是想通过做学习多一点js，二是这个扩展也还不算完善。如果你喜欢这个扩展并愿意捐赠作者，给一点点鼓励也好。。。点此给我买瓶汽水（支付宝）。

WP-Syntax代码编辑器插件

fatkun — Sun, 01 Jan 2012 07:54:49 +0000

升级到WP3.3后，之前的那些插入代码按钮都没有用啦。。上去找插件没找到，自己改了一个syntanx-highlighter的。
感谢原作者leo108，http://leo108.com/

把下面的代码保存下来，放在一个文件夹里，打包成zip文件，然后就可以在插件处上传安装了。
或者下载这个文件：http://fatkun.googlecode.com/files/wp-syntax-editor.zip

php
/*
Plugin Name: WP-Syntax Code Editor
Plugin URI: http://fatkun.com/2012/01/wp-syntax-code-editor.html
Description: 在编辑框加入一个插入wp-syntax代码的按钮，修改自syntax-highlighter-with-add-button-in-editor（原作者leo108）
Version: 1.0.0
Original Author: leo108
Author URI: http://fatkun.com/
*/
function codebox_init(){
?>
<div id="codebox" class="meta-box-sortables ui-sortable" style="position: relative;"><div class="postbox">
<div class="handlediv" title="Click to toggle">div>
<h3 class="hndle"><span>WP-Syntaxspan>h3>
<div class="inside">
Language:
<select id="language">
	<option value="other">Otheroption>
	<option value="bash">Bashoption>
	<option value="c">Coption>
	<option value="cpp">C++option>
	<option value="csharp">C#option>
	<option value="css">CSSoption>
	<option value="delphi">Delphioption>
	<option value="diff">Diffoption>
	<option value="erl">Erlangoption>
	<option value="groovy">Groovyoption>
	<option value="html">HTMLoption>
	<option value="java">Javaoption>
	<option value="js">Javascriptoption>
	<option value="perl">Perloption>
	<option value="php">PHPoption>
    <option value="ps">PowerShelloption>
	<option value="python">Pythonoption>
	<option value="ruby">Rubyoption>
	<option value="sql">SQLoption>
	<option value="vb">VisualBasicoption>
	<option value="vb">VB.NEToption>
	<option value="xml">XMLoption>
select>
<br>
Code:<br><textarea id="code" rows="8" cols="70" style="width:97%;">textarea><br>
<input type="button" value="INSERT" onclick="javascript:settext();">
 
<script>
function settext()
{ 
	var str=';
	var lang=document.getElementById("language").value;
	var code=document.getElementById("code").value;
	str=str+lang;
	str=str+'">';
	str=str+filter(code)+"
";
	var win = window.dialogArguments ¦¦ opener ¦¦ parent ¦¦ top;
	win.send_to_editor(str);
	document.getElementById("code").value="";
}
function filter (str) {
	str = str.replace(/&/g, '&');
	str = str.replace(/, '<');
	str = str.replace(/>/g, '>');
	str = str.replace(/'/g, ''');
	str = str.replace(/"/g, '"');
	str = str.replace(/\¦/g, '¦');
	return str;
}
script>
div>div>div>
<script>document.getElementById("postdivrich").appendChild(document.getElementById("codebox"));script>
php
}
add_action('dbx_post_sidebar','codebox_init');
?>

Fatkun图片批量下载谷歌浏览器扩展0.5版更新了

fatkun — Thu, 15 Dec 2011 15:45:21 +0000

0.5版插件地址：https://bath-image-download.googlecode.com/files/batch0_5.crx

主要是修复性更新。。最近都感觉很累，晚上回来就不想做什么了~很久没更新博客了。

0.5版更新

修复CHROMEV15点击图片不删除的问题
图片居中显示

在Extjs Grid扩展一个链接按钮列

fatkun — Sun, 30 Oct 2011 06:19:29 +0000

问题

想要在Extjs grid每一行添加一个链接或者添加一个按钮，怎么办？

解决方法

实现方法一是用renderer，但是这个链接的方法必须调用全局的变量。
方法二就是我将要介绍的。

ActionColumn是显示一个图标按钮，而我需要一个链接按钮呢？改写ActionColumn代码即可。
代码如下，主要是修改了renderer，如果你想改成button也是可以的：

/*!
 * Ext JS Library 3.3.1
 * Copyright(c) 2006-2010 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
Ext.grid.LinkColumn = Ext.extend(Ext.grid.Column, {
    header: ' ',
    linkIdRe: /x-link-col-(\d+)/,
 
    constructor: function(cfg) {
        var me = this,
            items = cfg.items || (me.items = [me]),
            l = items.length,
            i,
            item;
 
        Ext.grid.LinkColumn.superclass.constructor.call(me, cfg);
 
        me.renderer = function(v, meta) {
//          Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
            v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : '';
 
            meta.css += ' x-link-col-cell';
            for (i = 0; i < l; i++) {
                item = items[i];
                v += '+ String(i) + ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||this.scope||this, arguments) : '') + '"' +
                    ((item.tooltip) ? ' ext:qtip="' + item.tooltip + '"' : '') + '>' + (item.text||'') + '';
                if (i < l - 1) v += '    ';
            }
            return v;
        };
    },
 
    destroy: function() {
        delete this.items;
        delete this.renderer;
        return Ext.grid.LinkColumn.superclass.destroy.apply(this, arguments);
    },
 
    /**
     * @private
     * Process and refire events routed from the GridView's processEvent method.
     * Also fires any configured click handlers. By default, cancels the mousedown event to prevent selection.
     * Returns the event handler's status to allow cancelling of GridView's bubbling process.
     */
    processEvent : function(name, e, grid, rowIndex, colIndex){
        var m = e.getTarget().className.match(this.linkIdRe),
            item, fn;
        if (m && (item = this.items[parseInt(m[1], 10)])) {
            if (name == 'click') {
                (fn = item.handler || this.handler) && fn.call(item.scope||this.scope||this, grid, rowIndex, colIndex, item, e);
            } else if ((name == 'mousedown') && (item.stopSelection !== false)) {
                return false;
            }
        }
        return Ext.grid.LinkColumn.superclass.processEvent.apply(this, arguments);
    }
});
 
//register ptype
Ext.preg('linkcolumn', Ext.grid.LinkColumn);
 
// register Column xtype
Ext.grid.Column.types.linkcolumn = Ext.grid.LinkColumn;

使用方法

引用扩展的文件后，在grid columns加一个xtype: ‘linkcolumn’的列

    {
            xtype: 'linkcolumn',
            header: '操作',
            width: 100,
            sortable: true,
            items: [{
                text: '查看',
                handler: function(grid, rowIndex, colIndex) {
                    var record = grid.store.getAt(rowIndex);
                    new stat_task_his_win({
                        record: record
                    });
                }
            }]
    }

Extjs combobox下拉框模糊匹配

fatkun — Fri, 21 Oct 2011 17:30:28 +0000

Ext中的combobox有属性typeAhead：true 可以实现模糊匹配，但是是从开始匹配的，如果需要自定的的匹配，则需要监听beforequery方法，实现自己的匹配查询方法：

// 判断某个值str是否存在store里,field是store的字段
var checkIfInStore = function(str, store, field, ignoreCase) {
    var count = store.getCount();
    for( var i = 0; i < count; i++) {
        var val = store.getAt(i).get(field);
        if (ignoreCase) {
            str = str.toUpperCase();
            val = val.toUpperCase();
        }
        if (str == val) {
            return true;
        }
    }
    return false;
};
 
var ComboSearchPlugin = {
    init: function(combo) {
        combo.addListener('blur', function(combo) {
            // 如果没有写完整则设置为空
            var isValid = checkIfInStore(combo.getRawValue(), combo.store, combo.displayField, false);
            if (!isValid) {
                combo.setValue('');
            }
        });
 
        combo.addListener('beforequery', function(qe) {
            var combo = qe.combo;
            var q = qe.query;
            var forceAll = qe.forceAll;
            if (forceAll === true || (q.length >= this.minChars)) {
                if (this.lastQuery !== q) {
                    this.lastQuery = q;
                    if (this.mode == 'local') {
                        this.selectedIndex = -1;
                        if (forceAll) {
                            this.store.clearFilter();
                        } else {
                            // 检索的正则
                            var regExp = new RegExp(".*" + q + ".*", "i");
                            // 执行检索
                            this.store.filterBy(function(record, id) {
                                // 得到每个record的项目名称值
                                var text = record.get(combo.displayField);
                                return regExp.test(text);
                            });
                        }
                        this.onLoad();
                    } else {
                        this.store.baseParams[this.queryParam] = q;
                        this.store.load({
                            params: this.getParams(q)
                        });
                        this.expand();
                    }
                } else {
                    this.selectedIndex = -1;
                    this.onLoad();
                }
            }
            return false;
        });
    }
};

参考文章：http://weibaojun.iteye.com/blog/1098731
原文我试了一下有问题，第一次输入时会不显示结果，主要差别在onLoad上

下载新浪音乐

fatkun — Mon, 12 Sep 2011 07:48:21 +0000

新浪音乐没有直接下载音乐的地方。。听到一首好歌想要下载怎么办呢··找出它的下载地址

只要你得到新浪音乐的短地址，就行啦。（你可以分享一条歌曲获得短地址）

http://fatkun.com/sina.php

这样就可以找出新浪音乐的下载地址，从此爽歪歪..