MENU

JavaScript画像処理

【Node.js】 Webまたはローカルの画像からサイズ(幅高さ)取得

更新日:2021/10/07

 

最近サイトのAMP化を始めたのですが、imgタグをamp-imgに変換する際に幅と高さが必要になりました。
しかしimgタグで指定されたいないため、画像ファイルから取得する必要があります。

 

そこでローカルまたはWebサーバーの画像から、幅と高さを取得するコードを作成しました。

 

このページの目次
  1. requestとimage-sizeを使用
  2. 簡単な解説

requestとimage-sizeを使用

 

当初は標準モジュールのみで実現しようと思いましたが、非常にめんどうなので他のモジュールに頼ることにしました。

 

今回使用するのは、URLからコンテンツを取得するrequestモジュールと、画像サイズを取得するimage-sizeです。

 

しかし完成後にrequestは作成者により非推奨となっていることが判明しました。
対応策を検討した結果、標準モジュールのみでWebから画像を取得することにしました。

 

image-sizeは標準モジュールではないので、インストールします。

 

image-sizeのインストール

 

npm install image-size

 

今回作成したのが次のコードです。

 

Webまたはローカルの画像サイズを取得する関数

 


const http  = require('http');
const https = require('https');
const imageSize = require('image-size');

const sizeGet =  path =>
    new Promise( resolve => {

        if( !path.startsWith("http://") && !path.startsWith("https://") )
            imageSize(path,  (error, dimensions)=>
                 resolve(error ? {error:error.message} : dimensions)
            );
        else{
            const request = path.startsWith("http://") ? http : https;

            request.get( path ,
                 response => {
                            if( response.statusCode !== 200 ){
                                resolve( {error:response.statusCode});return;
                            }
                            const chunks = [];
                            response.on("data", chunk => chunks.push( chunk ) );
                            response.on('end', ()=>{
                                try{
                                    resolve( imageSize( Buffer.concat(chunks) ) );
                                }catch(error){
                                    resolve( {error:error.message});
                                }
                            });
                        }
                );
        }
    });

 

Webから画像を取得するのは標準モジュールのみではめんどうだと思いましたが、やってみたら簡単でした(汗

 

この関数はPromiseを返すので、結果はthenやawaitで取得します。

 

thenで取得

 

sizeGet(urlOrPath).then( result=>{
    if( result.error ) { console.log( `error:${ result.error }` ) ;}
    else{ console.log( result ); }
} );

 

awaitで取得

 

(async ()=>{
    const result = await sizeGet(url);
    if( result.error ) { console.log( `error:${ result.error }` ) }
    else{ console.log( result );}
})();

 

 

サイズの取得に成功すると、次のようなオブジェクトが結果として返ります。

 

{ 
    height: 高さ ,
    width: 幅 ,
    type: 画像のタイプ
}

 

簡単な解説

 

指定されたパスが"http://"または"https://"で始まらない場合、ローカルパスとみなして、image-sizeを実行します。

 

パスをURLとみなした場合、Webから画像データを取得します。
その際、"http://""https://"で使用するモジュールが異なります。
ですが使用法は同じなので、次のコードで選択しています。

 

const request = path.startsWith("http://") ? http : https;

 

getメソッドはデータが細切れに送られてきます。
送られてくるたびに連結するのは非効率なので、配列に追加しておきます。

 

データをすべて受け取ったら連結をするのですが、image-sizeはBufferを受け付けるので、Buffer.concatで連結しています。
なおimage-sizeはBufferを指定した場合、コールバック関数を指定できません。
そのため”データが画像出なかった”などのエラーは、tryで捕捉します。

 

けーちゃんおススメJavaScript入門書

  • スラスラ読める JavaScript ふりがなプログラミング
  • プログラム未経験者がJavaScript始めるならコレ!
    コードを掲載して自分で理解しろという投げっぱなしな入門書とは異なり、コードに一つ一つどんなことをやっているかをふりがなという形式で解説しています。
    それでいてJavaScriptの基礎と応用を学べる良書です。
  • これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
  • JavaScriptの機能を実践で活かすにはHTMLやCSSの知識が不可欠です。
    しかしそれらの知識があることが前提として書かれている書籍が多い中、この本は総合的な知識を身に着けることができます。
    HTMLやCSSの知識も不安な方には、ぴったりの一冊です
  •  

    入門書の役割は、自分のやりたいことをネットで調べることができるようになるための、基礎的な知識の獲得です。
    まずはこれらの本でしっかりと基礎知識を身につけましょう。
    そしてもっと高度なことや専門的なことはネットで調べ、情報が足りないと感じたら書籍を購入してください。


    記事の内容について

     

    こんにちはけーちゃんです。
    説明するのって難しいですね。


    「なんか言ってることおかしくない?」
    たぶん、こんなご意見あると思います。

    裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

    そんなときは、ご意見もらえたら嬉しいです。

    ご意見はこちら。
    https://note.affi-sapo-sv.com/info.php

    【お願い】

    お願い

    ■このページのURL


    ■このページのタイトル


    ■リンクタグ


    ※リンクして頂いた方でご希望者には貴サイトの紹介記事を作成してリンクを設置します。
    サイト上部の問い合わせよりご連絡ください。
    ただしサイトのジャンルによっては、お断りさせていただくことがあります。