Home > スポンサー広告 > ウェブページにある画像と背景画像を表示するブックマークレット (2)

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/184-2af9645d
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog

Home > スポンサー広告 > ウェブページにある画像と背景画像を表示するブックマークレット (2)

Home > javascript > ウェブページにある画像と背景画像を表示するブックマークレット (2)

ウェブページにある画像と背景画像を表示するブックマークレット (2)

javascript

ウェブページにある画像と背景画像を表示するブックマークレット2

Karafuto Blog: ウェブページにある画像と背景画像を表示するブックマークレット (1)の見た目を少し良くしてみた。

ブックマークレットは、新しいウィンドウを開いて、ウェブページの画像を表示して並べる。表示する画像は、img要素の画像と CSSで指定された背景画像。

変更したところ

  • 画像を一定のサイズで表示する。
  • 画像をクリックすると、ウィンドウに画像を開くようにリンクをつけた。
  • 1x1のサイズの画像、表示されない画像(スクリプトの中で取得できなかった画像)は表示しない。

ウェブページにある画像と背景画像を表示するブックマークレット2

ブックマークレットの内容

javascript:(function(column){

    // 横に並べる画像の数
    column = column ? column : 6;
    var pageImage = {
        column: column,
        newImages: []
    };
    getBoxSize();
    getImageUrl();
    getBackgroundImageUrl();
    removeOverlap();
    // 画像が見つからなかった時
    if (! pageImage.newImages.length){
        alert('\u753B\u50CF\u306F\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F');
        return;
    }
    createImage();
    createImageHTML();
    createHTML();
    openWindow();


    // 表示する画像のサイズを決める
    function getBoxSize(){
        pageImage.boxWidth = Math.floor( (window.innerWidth - 24 * pageImage.column - 55) / pageImage.column );
        pageImage.boxHeight = Math.ceil(pageImage.boxWidth / 4 * 3);
    }

    // 画像取得
    function getImageUrl(){
        var imgs = document.getElementsByTagName('img');
        if (imgs.length){
            for(var i = 0; i < imgs.length; i++){
                pageImage.newImages[i] = {};
                pageImage.newImages[i].src = imgs[i].src;
            }
        }
    }

    // 背景画像を取得
    function getBackgroundImageUrl(){
        var elm = document.getElementsByTagName('*');
        var backgroundImage, url, index;
        for (var i = 0; i < elm.length; i ++ ){
            backgroundImage = document.defaultView.getComputedStyle(elm[i], '').getPropertyValue('background-image');
            if (backgroundImage != 'none'){
                index = pageImage.newImages.length;
                url = backgroundImage.replace(/url\(\s*(['"]?)(.+)\1\s*\)/, '$2');
                pageImage.newImages[index] = {};
                pageImage.newImages[index].src = url;
            }
        }
    }

    // 重複を削除
    function removeOverlap(){
        var imgs = pageImage.newImages;
        for (var i = 0; i < imgs.length - 2; i ++ ){
            for (var j = imgs.length - 1; j > i; j -- ){
                if (imgs[i].src == imgs[j].src){
                    imgs.splice(j, 1);
                }
            }
        }
    }

    // 画像を作成
    function createImage(){
        var imgs = pageImage.newImages;
        var url;
        for (var i = 0; i < imgs.length ; i ++ ){
            url = pageImage.newImages[i].src;
            pageImage.newImages[i] = new Image();
            pageImage.newImages[i].src = url;
        }
    }

    // HTMLを作成
    function createHTML(){
        var boxSize = ' width: ' + pageImage.boxWidth + 'px; height: ' + pageImage.boxHeight + 'px;';
        var style = '<style>body{margin: 20px auto 20px 20px; padding: 0; background: #191919;} body.show{visibility: visible;} ul{margin: 0; padding: 0;} li{ border: 2px solid #303030; margin: 10px 10px 10px 10px; padding: 0; background: #303030; float: left;' + boxSize + ' overflow: hidden; text-align: center; list-style: none; cursor: pointer;} li:hover{border: 2px #c0c0c0 solid;} li:nth-last-child(1){margin-bottom: 30px;} a{margin: 0; padding: 0; display: block;' + boxSize + '}</style>';
        pageImage.HTML = '<html><head><title>images(' + pageImage.newImages.length + ') ' + document.title + '</title>' + style + '</head><body><p>' + pageImage.HTML + '</p></body></html>';
    }

    // 画像のリストの HTMLを作成
    function createImageHTML(){
        pageImage.HTML = '<ul>';
        var img, size, title, style, width, height, source;
        for (var i = 0; i < pageImage.newImages.length; i ++ ){
            width = pageImage.newImages[i].width;
            height = pageImage.newImages[i].height;
            source = pageImage.newImages[i].src ;
            // 1x1以下の画像は取り除く
            if ( width < 2 && height < 2){
                pageImage.newImages.splice(i, 1);
                i -- ;
                continue;
            }
            title = ' title="' + width + ',' + height + ' ' + source + '"';
            if ( width > pageImage.boxWidth || height > pageImage.boxHeight){
                if (width / pageImage.boxWidth > height / pageImage.boxHeight){
                    height = Math.floor(height * pageImage.boxWidth / width );
                    width = pageImage.boxWidth;
                } else {
                    width = Math.floor(width * pageImage.boxHeight / height );
                    height = pageImage.boxHeight;
                }
            }
            style = ' style="width: ' + width + 'px; height: ' + height + 'px;';
            if (height < pageImage.boxHeight){
                offsetY = Math.floor( (pageImage.boxHeight - height) / 2 );
                style += ' position: relative; top: ' + offsetY + 'px;';
            }
            style += '"';
            source = '"' + source + '"';
            pageImage.HTML += '<li><a href=' + source + title + '><img src=' + source + style + ' /></a></li>';
        }
        pageImage.HTML += '</ul>';
    }

    // 新しいウィンドウを表示
    function openWindow(){
        var win = pageImage.win = window.open();
        win.document.open();
        win.document.write(pageImage.HTML);
        win.document.close();
    }

})();

横に並べる画像の数の初期値は 6ですが、ブックマークレットの関数の引数に好きな数を入れれば画像の列数を変えられる。ブックマークレットの一番右の括弧に任意の数字を入れる。

横に並べる画像を10にしたいのならば、

javascript:(function(column){column...(コード)...close();}})(10);

10列にしたウェブページにある画像と背景画像を表示するブックマークレット2

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/184-2af9645d
Listed below are links to weblogs that reference
ウェブページにある画像と背景画像を表示するブックマークレット (2) from Karafuto Blog

Home > javascript > ウェブページにある画像と背景画像を表示するブックマークレット (2)

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。