おれせか

なんかそれっぽいのをうにうに。

画像の一部を任意のサイズに切り抜くjQueryプラグイン作ったー。
ひとまず、IE6~、Firefox、Google Chromeでは動作確認できました。

ちなみに使いどころはよく考えてない。まぁなんかあるでしょ。

必要なもの

サンプル

http://ichi.fool.jp/test/js/jquery/clip/clip.html

使い方

$(function(){
    $('#img01').clip(500); //id=img01の画像を500*500で中央で切り抜くよ!
    $('.img02').clip(300, 200, {position: 'right center'}); //class=img02の画像たちを300*200で右端の中央で切り抜くよ!
})

たぶんサンプル見たほうがはやい。

オプション

position(デフォルト値:’center center’)
どこを切り抜くかの指定。
cssのbackground-positionと同じ指定方法。
左右はleft/center/right、上下はtop/center/bottomのいずれか。
または左/上からの数値(px)でもOK。(’100 50′みたいな。)
default_size(デフォルト値:false)
trueにしたら元の画像の範囲はそのままにしておく。(こっちがcssのclipのふつーな動作だと思ってもらえれば。)
falseだと切り取った部分の大きさの画像になるカンジ。(伝わる?コレ)

ソース

(function($){//BEGIN $ = jQuery
    
    /*
     * obj.clip(50); //縦横いっしょ
     * obj.clip(50, 30); //幅と高さ指定
     * obj.clip(50, {~~~});
     * obj.clip(50, 30, {~~~});
     *
     * ◆オプション
     * ・position
     *         どこを切り抜くか。
     *         cssのbackground-positionと同じ指定方法。デフォは'center center'
     *         横はleft/center/right、縦はtop/center/bottom。あと左/上からの数値(px)でもOK。
     * ・default_size
     *         trueにしたら元の画像の範囲はそのままにしておくよ。デフォはfalse
     *
     */
    $.fn.clip = function(width, height, options){
        if(!arguments.length) return this;
        
        width = width - 0;
        if(!options && typeof height == "object"){
            options = height;
            height = null;
        }
        height = (height || width) - 0;
        options = $.extend({
              position: 'center center'
            , default_size: false
        }, typeof options == "object" ? options : {});
        var default_size = options.default_size;
        
        this.filter('img')
            .each(function(){
                var $img = $(this);
                var img_width = this.width,
                    img_height = this.height,
                    img_pos = $img.css('position'),
                    img_css = {};
                
                if(img_pos != 'absolute'){
                    if(img_pos == 'static'){
                        img_css.top = 0;
                        img_css.left = 0;
                    }
                    
                    var $img_wrap = $('<span></span>').css({
                          position: 'relative'
                        , display: 'inline-block'
                        , width: default_size ? img_width : width
                        , height: default_size ? img_height : height
                    });
                    if(!default_size) $img_wrap.css('overflow', 'hidden');
                    
                    img_css.position = 'absolute';
                    $img.wrap($img_wrap);
                }
                
                var clip_pos = {};
                var opt_pos = options.position.split(' ');
                switch(opt_pos[0]){
                    case 'center':
                        clip_pos.left  = (img_width - width) / 2;
                        clip_pos.right = clip_pos.left + width;
                        break;
                    case 'right':
                        clip_pos.left  = img_width - width;
                        clip_pos.right = img_width;
                        break;
                    default:
                        opt_pos[0] = opt_pos[0] - 0;
                        if(!opt_pos[0]) opt_pos[0] = 0;
                        clip_pos.left  = opt_pos[0];
                        clip_pos.right = clip_pos.left + width;
                        break;
                }
                switch(opt_pos[1]){
                    case 'center':
                        clip_pos.top    = (img_height - height) / 2;
                        clip_pos.bottom = clip_pos.top + height;
                        break;
                    case 'bottom':
                        clip_pos.top    = img_height - height;
                        clip_pos.bottom = img_height;
                        break;
                    default:
                        opt_pos[1] = opt_pos[1] - 0;
                        if(!opt_pos[1]) opt_pos[1] = 0;
                        clip_pos.top    = opt_pos[1];
                        clip_pos.bottom = clip_pos.top + height;
                        break;
                }
                img_css.clip = ['rect(', [
                      clip_pos.top
                    , clip_pos.right
                    , clip_pos.bottom
                    , clip_pos.left
                ].join('px '), 'px)'].join('');
                
                if(!default_size){
                    img_css.top  = clip_pos.top * -1;
                    img_css.left = clip_pos.left * -1;
                }
                
                $img.css(img_css);
            });
        
        return this;
    };
    
    
})(jQuery);//END $ = jQuery
PAGETOP
PAGETOP
PAGETOP

Comments (16)

取った部分の大きさの画像になるカンジ。

[2014/07/12 (土) 12:45]

したら元の画像の範囲はそのままにしておく。

[2014/07/12 (土) 12:46]

したら元の画像の範囲はそのままにしておく。

[2014/12/24 (水) 17:55]

’s datacenter-focused titles, and shouldn’t be undertaken by ts than several years of solid administration

[2015/08/13 (木) 16:33]

trueにしたら元の画像の範囲はそのままにしておく。(こっちがcssのclipのふつーな動作だと思ってもらえれば。)

[2015/09/16 (水) 13:07]

l直書きでネスト作るこ

[2015/10/13 (火) 17:11]

このシャネル腕時計のブランドの自分、
シャネル激安http://www.cctoh.com/
93―01チップを基礎にする93―02は自動的に鎖の機械のチップに行って駆動します。
シャネル財布
シャネルピアス
シャネル眼鏡
シャネルバッグ
シャネル腕時計
シャネル靴
このチップは48時間の動力を持って貯蓄して、
シャネル激安腕時計の使用更におだやかで心地良くて、
飛行する陀はずみ車は8粒のねじの調節の後の改良システムでと腕時計、
シャネル完璧な精密で正確な度を確保しました。

[2015/11/18 (水) 00:44]

画像の一部を任意のサイズに切り抜くjQueryプラグイン作ったー。
ひとまず、IE6~、Firefox、Google Chromeでは動作確認できました

[2016/01/06 (水) 18:09]

画面中央にこのボックスが表示されるサンプルで、ポップアップされたウィンドウ内でスクロールができるようにしたいのですが、どうしたらよいものか、と困っております。

[2016/01/07 (木) 11:02]

まぁなんかあるでしょ。

[2016/01/15 (金) 17:45]

、これは本当に素晴らしい情報であるあなたに感謝し、このテーマについての私を助けて

[2016/03/18 (金) 06:38]

amazing article and interesting content and it is amazing to learn and read

[2016/06/15 (水) 23:32]

画像の一部を任意のサイズに切り抜くjQueryプラグイン作ったー。
ひとまず、IE6~、Firefox、Google Chromeでは動作確認できました。

[2016/06/20 (月) 12:17]

宝のスーパーコピーめでたい(ミュウミュウ)。

[2016/06/27 (月) 18:40]

どぞ、ありがとございます

[2016/08/12 (金) 19:02]

ありがとう。時々私は人生は無味であることを考えます

[2016/10/08 (土) 12:34]
PAGETOP

Comment Form

PAGETOP

Trackbacks (0)

トラックバックはありません。

PAGETOP

Trackback URL

PAGETOP

Search