このネタを見た時は「やられた！」と思いました：
手持ちの画像を「Excel」ファイルにしてしまうWebアプリ「Image to Excel」が爆誕
画像をアップロードして、そのピクセル情報を解析して（よりによって）エクセルファイル化する・・・ 素晴らしい変態アプリだと思いました（褒めてます）。 これをアイデアだけでなく実装して公開する行動力まで含めて素晴らしい姿勢だと感じました。自分もこうでありたい。。
で、その衝撃が強すぎたのか、「これ自分だったらどう作るだろうか？？」と考え、特にセルの属性を変更したエクセルファイルとして出力する所は何をどうやれば実現できそうか・・ なども調べた上で、なんとか同じような機能を実装することができたと思っています。自分の場合はアプリケーションというよりは REST API として実装したので、この機能を外部アプリからも使えるような形で仕上げています（Swagger ドキュメントも用意したのでウェブブラウザの UI からも使えるはずです）。実装したものは先日このブログでも紹介した無料の PaaS 環境を使って公開しています：
ソースコード
https://github.com/dotnsf/image2xlsx
公開した REST API（の Swagger ドキュメント）
https://image2xlsx.140.238.50.190.sslip.io/ （使い方も後述します）
で、この機能を作る上で xlsx-js-style という npm ライブラリを使っています。このライブラリは Node.js やフロントエンド JavaScript からエクセルファイルを生成する機能を持ったライブラリです。もともとは SheetJS というライブラリ（無料）があったのですが、有料版の提供を境にして無料版のサポートが少なくなってしまったのか、更新が途絶えてしまいました。そこで SheetJS からフォークして様々な後継ライブラリが作られていったのですが、xlsx-js-style はその１つです。ただ詳しい使い方がウェブ上でもあまり見つけることができず、一部では「事実上、読み取り用のライブラリ」とも書かれていました。実際はそんなことはなくて、現に今回紹介するようなエクセルブックファイルを新規作成する上での最低限の機能を持っていました。一方で情報が少ないことも事実で、今回はソースコードの中身を含めて自分でも色々調べながらの作業となりました。その調べて分かった内容も含めて本ブログエントリにまとめておこうと思います。
なお以下で紹介する内容は 2023/12/08 時点で公開しているサービスと、そのソースコードについて紹介しています。今後の更新で多少実装内容が変わる可能性もあることをご了承ください。
【image2xlsx （の Swagger ドキュメント）の使い方】
何はともあれ公開している機能の使い方を紹介します。作ったのは REST API なんですが、Swagger ドキュメントも併せて公開しているので curl などを使わなくてもウェブブラウザで実際の挙動を確認できるように（つまり手持ちの画像をアップロードして画像化したエクセルファイルをダウンロードすることができるように）しています。ウェブブラウザでこの URL にアクセスしてみてください：
https://image2xlsx.140.238.50.190.sslip.io/
↑上のような画面が表示されれば成功です。https スキーマを使ってアクセスしているはずなので、実際に使う前に Schemas と書かれた欄（上図の赤枠部分）を "HTTP" から "HTTPS" に変更しておいてください（このサイトのサービスを使う場合、あらかじめ HTTPS に変更しておかないと正しく実行できません）。
この Swagger ドキュメントで提供している REST API は１つだけで、"POST /image" です。緑色の "POST" と書かれた部分をクリックして展開してみましょう：
省略されていた部分が展開されて上のような画面になったはずです。この画面で "POST /image" API にはいくつかのパラメータが指定できることがわかります。が、まずは実際に API を実行してみたいので "Try it out" と書かれたボタンをクリックします：
パラメータ部分が編集可能状態に切り替わり、一番下には "Execute" と書かれた青いボタンが現れたはずです。これでパラメータを指定して "Execute" ボタンをクリックすると実際に REST API が動く状態になりました。パラメータは４つありますが、入力必須なのは一番下の file フィールドだけです。他はいったん無視して file フィールドのボタンをクリックして適当な画像ファイル（.jpg, .gif, .png など）を指定してください（2023/12/08 時点では 10MB 以下の画像ファイルを受け付けることができます。もっと大きなファイルを扱えるようにしたい場合は是非ソースコードをダウンロードして自分で改良してみてください）。この際に日本語名のファイルを指定するとダウンロードするエクセルファイル名が文字化けしてしまうので、（ファイル名の文字化け程度を許容できる場合はそのままでもいいですが）できれば半角英数字名だけで構成されたファイル名の画像ファイルを指定してください：
（↑hachi.jpg というこの画像ファイルを指定してみました）
ファイルを選択したら "Execute" ボタンをクリックします：
すると指定したファイルがアップロードされ、エクセルファイル化が実行されます（実行中は "LOADING" と表示されます）：
正しく処理が完了すると "Responses" 欄が現れます。ここには実際に実行した REST API の内容（curl コマンドで実行した時のコマンドの内容）やその実行結果のレスポンスに関する情報が表示されます。処理が成功していると "Download file" と書かれたリンクが表示されていて、ここをクリックすると実行結果のエクセルファイルをダウンロードできます：
実際に "Download file" をクリックします。ダウンロードは一瞬のはずです。ちなみにエクセルファイル名は元の画像ファイル名の拡張子部分が "xlsx" になったものです（hachi.jpg → hachi.xlsx）：
ダウンロードしたファイルを（ダブルクリックするなどして）エクセルやエクセル互換ツールで開いてみると期待通りのエクセルシートが表示されるはずです（シート名は元の画像ファイル名です）。元祖の Image to Excel と同じような結果になっているはずです：
（↑シートに画像が貼られているのではなく、細かなセルの色を変えることで実現しています）
なお今回はアップロードする画像以外のパラメータを無視していました。これらのパラメータの意味とデフォルト値について簡単に説明しておきます：
px パラメータは「エクセルファイル側で画像の１ピクセルを何ピクセルのセルで表現するか」という数値です。デフォルト値は「２」です。つまり何も指定しなければ画像の各ピクセルは「横 2px 縦 2px」のサイズのセルとして表示されます。この値を変えたい場合は px パラメータになんらかの数値（１とか３あたり）を入力してください。
width パラメータは「エクセルファイル側で画像の横幅を何個ぶんのセルを使って表現するか」の数です。デフォルト値は「１００」です。つまり何も指定しなければアップロードされた画像の横幅サイズを 100 に縮小（または拡大）します。
同様に height パラメータは「エクセルファイル側で画像の縦幅を何個ぶんのセルを使って表現するか」の数です。デフォルト値はなく、何も指定されなかった場合は縦横比を保ったまま横サイズ（こちらのデフォルト値は 100）に合わせて縦幅が拡大縮小されます。
なお height パラメータのみ指定されて width パラメータが指定されていなかった場合は、縦横比を保ったまま縦サイズ（=height）に合わせて横幅が拡大縮小されます。
このような仕様となっていました。なので、これらを何も指定せずに実行した場合は、
・画像の１ピクセルは 2x2 px サイズのセルで表示される（そのピクセルの色がセルの色になる）
・横幅は 100px に拡大縮小され、縦幅は同じ比率で拡大縮小される
ということになります。何も指定しなければ横幅は 100 になるので、巨大な画像をアップロードしても、そこまで巨大なエクセルファイルにはならないはずです。よかったら（必要に応じてパラメータも変えたりしながら）使ってみてください。
【image2xlsx REST API の使い方】
ここからは Swagger ドキュメントの使い方というよりは REST API の使い方を説明します。改めて実行結果の Responses 部分の、"Curl" と書かれた部分を見てみます：
file 以外のパラメータを指定せずに実行した場合はこんな感じに書かれているはずです：
ちなみにパラメータを指定した場合（例えば width パラメータを 200 に指定して実行した場合）はこのようになります（-F "width=200" が追加されています）：
これがこの画像ファイルをエクセルファイル化する時に実行された curl コマンドそのものでもあります。REST API としては以下のような仕様です：
・エンドポイント URL は "https://image2xlsx.140.238.50.190.sslip.io/image"
・HTTP メソッドは "POST"
・HTTP リクエストヘッダは "accept: application/vnd.ms-excel" と "Content-Type: multipart/form-data"
・HTTP リクエストボディは以下を FormData で送信
- px パラメータでエクセルファイルのセル１つのサイズを何ピクセル平方にするか
- width パラメータでエクセルファイルのセルを何列で表現するか
- height パラメータでエクセルファイルのセルを何行で表現するか
- file パラメータで画像ファイル本体（ここだけ必須）
・HTTP レスポンスはエクセルファイルのバイナリデータ
（需要があるとは思えないのですが）ここを理解した上で外部アプリからこのエンドポイントへファイルをアップロードすればエクセルファイル化してダウンロードすることもできるようになります。REST API 化したので外部連携も可能な形になっています（サーバーがそこまで潤沢な環境ではないので、お手柔らかに使ってください）。
【xslx-js-style をどのように使ったか】
ここまでの内容は「本家の Image to Excel をパクってみました」という内容でした。ここからがこのブログエントリの本体ともいえる部分だと思っていて、「これをどうやって作ったのか」という技術的な解説になります。本家のサービスがどのように作られているのかは分からないのですが、自分はこうやってみた、という紹介です。ちなみにプログラミング言語は Node.js で作っています。
改めて、私が作った image2xlsx のソースコードはこちらで公開しています。実際の実装ソースコードはここからも参照できるので興味ある方は是非どうぞ。
この "POST /image" メソッドは概ね以下のようなフローで作られています：
（１）一時フォルダにアップロードされた画像ファイルを受け取る
（２）画像ファイルを開いて、サイズ（横幅、縦幅）を調べる
（３）受け取ったパラメータなどから出力時のサイズ（横幅、縦幅）を求める
（４）Canvas ライブラリを使って仮想的なキャンバスを作り、画像を出力時のサイズで描画する
（５）エクセルワークブック（ファイル）を新規に作成する
（６）エクセルワークシート（タブ）を新規に作成する
（７）（３）で求めたサイズに合わせて画像の各ピクセルぶんのセルをワークシート内に用意する
（８）（４）の画像データを取り出し、１ピクセルごとに RGB 値を取得し、
（９）（８）の結果を各セルの背景色に指定する
（１０）セルの色を指定したワークシートをワークブックに追加する
（１１）ワークブックのデータを取り出し、HTTP レスポンスとして返す
以下、このフローの実装内容を順に説明していきます。まず（１）ですが、ここは multer というファイルアップロード機能を作る時の定番ライブラリがあるので multer を使って実装しています。
該当コードとしてはこのような感じです：
（２）以降で仮想キャンバス機能を使います。フロントエンド JavaScript では HTML5 の Canvas に相当する機能なのですが、node-Canvas というバックエンド用の互換ライブラリ（のプラットフォーム非互換性を解消した @napi-rs/canvas というライブラリ）を使っています。この canvas でアップロードされた画像ファイルを読み込み、横幅と縦幅を取り出します。
（３）は、画像ファイルと一緒に送られてきたサイズに関するパラメータを使い（送られていない場合はデフォルト設定値を使い）、必要に応じて元画像の縦横比に合わせる形で計算も行って、エクセルファイル内のセルの横幅数と縦幅数を求めておきます。
この（２）と（３）に相当する部分のコードはこのようになっています：
（４）では仮想的な Canvas を作って、Canvas 内に元画像を元のサイズから出力時のサイズに拡大・縮小したものを表示（仮想的な Canvas なので実際に表示されるわけではないですが）しています。Canvas に描画されたデータはピクセルごとの情報（今回の場合であれば RGB 値）を取り出して調べることができるようになります。
この部分のコードはこのようにしています：
ここまでは（アップロードされた画像を拡大縮小して、各ピクセル毎の情報を取り出すための準備までは） xlsx-js-style ライブラリを使わずに実装しています。ここからが xlsx-js-style ライブラリの出番です。
（５）この後、各ピクセル毎の情報を調べていくのですが、その前にワークブックを新規に作成します。「ワークブック」＝「エクセルファイル」と考えると理解しやすいと思いますが、ここでの「新規作成」の意味は「新しいエクセルファイルを作って、まだ保存していない状態にする」と思っていてください。なおこの時点ではワークブック内に１つもタブが存在していない状態で作成されています。
xlsx-js-style でワークブックを新規作成するには utils.book_new() というメソッドを実行します：
（６）ではワークブックに追加することになるワークシート（タブ）を新規に１つ作成します。
xlsx-js-style でワークシートを新規作成するには utils.aoa_to_sheet() というメソッドを実行します。引数にワークシート内の各列の情報を含めることができますが、この時点では特に指定せずに作成しています：
（７）はワークシート内で使うことになるセルの列数と行数（つまり画像の横幅と縦幅）の分だけセルのサイズを調整します。
ここでの「セルのサイズ」とは「REST API 実行時に px パラメータとして指定された値（指定されていない場合は default_px の値（＝２）」です。また「セルの列数」とは「Canvas 上に表示されている画像の横幅（＝imagedata.width）」で、「セルの行数」とは「Canvas 上に表示されている画像の縦幅（＝imagedata.height）」のことです。したがって「セルの列数の分だけセルのサイズを調整する」コードは以下のようになります。具体的には各列の幅を { wpx: （セル幅のピクセル数）} というオブジェクトで定義する配列を用意してワークシートオブジェクトの '!cols' 値として設定し、各行の幅は [ hpx: （セル高さのピクセル数） } というオブジェクトで定義する配列を用意してワークシートオブジェクトの '!rows' 値として設定します。具体的には以下のようなコードになります：
（８）では Canvas 内の各ピクセルにアクセスして RGB 値をそれぞれ取り出し、16進法の "RRGGBB" フォーマットに変換して、
（９）その "RRGGBB" 値をワークシート内の対応するセルの背景色として指定してゆきます。
この（８）と（９）はループ内で以下のように実現しています。ピクセルの RGB 値は Canvas のデータ内に４つごとに（R 値、G 値、B 値、輝値）格納されているのでそれぞれを取り出し、この値を "RRGGBB" というフォーマットに変えて、"A1", "A2", ... といったセルの色として指定しています。また cellname という関数を用意して縦位置、横位置からセル名に変換できるようにしています（この後の（１０）でも使っています）：
（１０）（７）、（８）、（９）の処理によって変更されたワークシートの内容をワークブックに反映します。これでレスポンスとして返すエクセルファイル（のデータ）が完成しました。
このコードでは実際に使ったセルの範囲を "A1:（最も右下にあるセルの名前）" という形でワークシートの '!ref' 値に指定してから、作成したワークシートをワークブックに追加する、という処理を実行しています：
（１１）最後に完成したエクセルファイルを HTTP リクエストに対する HTTP レスポンスとして返します。
ここでは、これまでの処理で作成したワークブックのバッファデータを取得して HTTP レスポンスヘッダと合わせる形で返す、ということになるのですが、xlsx-js-style のソースコードを調べてもワークブックのバッファデータを直接取得する関数は用意されていないようでした。というわけで、一旦ワークブックファイルとして書きだし、ワークブックファイルを読み込んだ上で返す（そしてワークブックファイルをアップロード画像と一緒に消す）、というアルゴリズムにしています：
・・と、このような形で xlsx-js-style を使ってエクセルファイルをバックエンドで作成することができました。グラフとかまでは難しそうではありますが、セルのサイズや色を指定したワークシートを作るという程度であれば実現できないことはなさそうで、今後エクセル連携が必要になった場合でも使えそうなライブラリでした。
手持ちの画像を「Excel」ファイルにしてしまうWebアプリ「Image to Excel」が爆誕
画像をアップロードして、そのピクセル情報を解析して（よりによって）エクセルファイル化する・・・ 素晴らしい変態アプリだと思いました（褒めてます）。 これをアイデアだけでなく実装して公開する行動力まで含めて素晴らしい姿勢だと感じました。自分もこうでありたい。。
で、その衝撃が強すぎたのか、「これ自分だったらどう作るだろうか？？」と考え、特にセルの属性を変更したエクセルファイルとして出力する所は何をどうやれば実現できそうか・・ なども調べた上で、なんとか同じような機能を実装することができたと思っています。自分の場合はアプリケーションというよりは REST API として実装したので、この機能を外部アプリからも使えるような形で仕上げています（Swagger ドキュメントも用意したのでウェブブラウザの UI からも使えるはずです）。実装したものは先日このブログでも紹介した無料の PaaS 環境を使って公開しています：
ソースコード
https://github.com/dotnsf/image2xlsx
公開した REST API（の Swagger ドキュメント）
https://image2xlsx.140.238.50.190.sslip.io/ （使い方も後述します）
で、この機能を作る上で xlsx-js-style という npm ライブラリを使っています。このライブラリは Node.js やフロントエンド JavaScript からエクセルファイルを生成する機能を持ったライブラリです。もともとは SheetJS というライブラリ（無料）があったのですが、有料版の提供を境にして無料版のサポートが少なくなってしまったのか、更新が途絶えてしまいました。そこで SheetJS からフォークして様々な後継ライブラリが作られていったのですが、xlsx-js-style はその１つです。ただ詳しい使い方がウェブ上でもあまり見つけることができず、一部では「事実上、読み取り用のライブラリ」とも書かれていました。実際はそんなことはなくて、現に今回紹介するようなエクセルブックファイルを新規作成する上での最低限の機能を持っていました。一方で情報が少ないことも事実で、今回はソースコードの中身を含めて自分でも色々調べながらの作業となりました。その調べて分かった内容も含めて本ブログエントリにまとめておこうと思います。
なお以下で紹介する内容は 2023/12/08 時点で公開しているサービスと、そのソースコードについて紹介しています。今後の更新で多少実装内容が変わる可能性もあることをご了承ください。
【image2xlsx （の Swagger ドキュメント）の使い方】
何はともあれ公開している機能の使い方を紹介します。作ったのは REST API なんですが、Swagger ドキュメントも併せて公開しているので curl などを使わなくてもウェブブラウザで実際の挙動を確認できるように（つまり手持ちの画像をアップロードして画像化したエクセルファイルをダウンロードすることができるように）しています。ウェブブラウザでこの URL にアクセスしてみてください：
https://image2xlsx.140.238.50.190.sslip.io/
↑上のような画面が表示されれば成功です。https スキーマを使ってアクセスしているはずなので、実際に使う前に Schemas と書かれた欄（上図の赤枠部分）を "HTTP" から "HTTPS" に変更しておいてください（このサイトのサービスを使う場合、あらかじめ HTTPS に変更しておかないと正しく実行できません）。
この Swagger ドキュメントで提供している REST API は１つだけで、"POST /image" です。緑色の "POST" と書かれた部分をクリックして展開してみましょう：
省略されていた部分が展開されて上のような画面になったはずです。この画面で "POST /image" API にはいくつかのパラメータが指定できることがわかります。が、まずは実際に API を実行してみたいので "Try it out" と書かれたボタンをクリックします：
パラメータ部分が編集可能状態に切り替わり、一番下には "Execute" と書かれた青いボタンが現れたはずです。これでパラメータを指定して "Execute" ボタンをクリックすると実際に REST API が動く状態になりました。パラメータは４つありますが、入力必須なのは一番下の file フィールドだけです。他はいったん無視して file フィールドのボタンをクリックして適当な画像ファイル（.jpg, .gif, .png など）を指定してください（2023/12/08 時点では 10MB 以下の画像ファイルを受け付けることができます。もっと大きなファイルを扱えるようにしたい場合は是非ソースコードをダウンロードして自分で改良してみてください）。この際に日本語名のファイルを指定するとダウンロードするエクセルファイル名が文字化けしてしまうので、（ファイル名の文字化け程度を許容できる場合はそのままでもいいですが）できれば半角英数字名だけで構成されたファイル名の画像ファイルを指定してください：
（↑hachi.jpg というこの画像ファイルを指定してみました）
ファイルを選択したら "Execute" ボタンをクリックします：
すると指定したファイルがアップロードされ、エクセルファイル化が実行されます（実行中は "LOADING" と表示されます）：
正しく処理が完了すると "Responses" 欄が現れます。ここには実際に実行した REST API の内容（curl コマンドで実行した時のコマンドの内容）やその実行結果のレスポンスに関する情報が表示されます。処理が成功していると "Download file" と書かれたリンクが表示されていて、ここをクリックすると実行結果のエクセルファイルをダウンロードできます：
実際に "Download file" をクリックします。ダウンロードは一瞬のはずです。ちなみにエクセルファイル名は元の画像ファイル名の拡張子部分が "xlsx" になったものです（hachi.jpg → hachi.xlsx）：
ダウンロードしたファイルを（ダブルクリックするなどして）エクセルやエクセル互換ツールで開いてみると期待通りのエクセルシートが表示されるはずです（シート名は元の画像ファイル名です）。元祖の Image to Excel と同じような結果になっているはずです：
（↑シートに画像が貼られているのではなく、細かなセルの色を変えることで実現しています）
なお今回はアップロードする画像以外のパラメータを無視していました。これらのパラメータの意味とデフォルト値について簡単に説明しておきます：
px パラメータは「エクセルファイル側で画像の１ピクセルを何ピクセルのセルで表現するか」という数値です。デフォルト値は「２」です。つまり何も指定しなければ画像の各ピクセルは「横 2px 縦 2px」のサイズのセルとして表示されます。この値を変えたい場合は px パラメータになんらかの数値（１とか３あたり）を入力してください。
width パラメータは「エクセルファイル側で画像の横幅を何個ぶんのセルを使って表現するか」の数です。デフォルト値は「１００」です。つまり何も指定しなければアップロードされた画像の横幅サイズを 100 に縮小（または拡大）します。
同様に height パラメータは「エクセルファイル側で画像の縦幅を何個ぶんのセルを使って表現するか」の数です。デフォルト値はなく、何も指定されなかった場合は縦横比を保ったまま横サイズ（こちらのデフォルト値は 100）に合わせて縦幅が拡大縮小されます。
なお height パラメータのみ指定されて width パラメータが指定されていなかった場合は、縦横比を保ったまま縦サイズ（=height）に合わせて横幅が拡大縮小されます。
このような仕様となっていました。なので、これらを何も指定せずに実行した場合は、
・画像の１ピクセルは 2x2 px サイズのセルで表示される（そのピクセルの色がセルの色になる）
・横幅は 100px に拡大縮小され、縦幅は同じ比率で拡大縮小される
ということになります。何も指定しなければ横幅は 100 になるので、巨大な画像をアップロードしても、そこまで巨大なエクセルファイルにはならないはずです。よかったら（必要に応じてパラメータも変えたりしながら）使ってみてください。
【image2xlsx REST API の使い方】
ここからは Swagger ドキュメントの使い方というよりは REST API の使い方を説明します。改めて実行結果の Responses 部分の、"Curl" と書かれた部分を見てみます：
file 以外のパラメータを指定せずに実行した場合はこんな感じに書かれているはずです：
curl -X POST "https://image2xlsx.140.238.50.190.sslip.io/image" -H "accept: application/vnd.ms-excel" -H "Content-Type: multipart/form-data" -F "file=@hachi.png;type=image/png"
ちなみにパラメータを指定した場合（例えば width パラメータを 200 に指定して実行した場合）はこのようになります（-F "width=200" が追加されています）：
curl -X POST "https://image2xlsx.140.238.50.190.sslip.io/image" -H "accept: application/vnd.ms-excel" -H "Content-Type: multipart/form-data" -F "width=200" -F "file=@hachi.png;type=image/png"
これがこの画像ファイルをエクセルファイル化する時に実行された curl コマンドそのものでもあります。REST API としては以下のような仕様です：
・エンドポイント URL は "https://image2xlsx.140.238.50.190.sslip.io/image"
・HTTP メソッドは "POST"
・HTTP リクエストヘッダは "accept: application/vnd.ms-excel" と "Content-Type: multipart/form-data"
・HTTP リクエストボディは以下を FormData で送信
- px パラメータでエクセルファイルのセル１つのサイズを何ピクセル平方にするか
- width パラメータでエクセルファイルのセルを何列で表現するか
- height パラメータでエクセルファイルのセルを何行で表現するか
- file パラメータで画像ファイル本体（ここだけ必須）
・HTTP レスポンスはエクセルファイルのバイナリデータ
（需要があるとは思えないのですが）ここを理解した上で外部アプリからこのエンドポイントへファイルをアップロードすればエクセルファイル化してダウンロードすることもできるようになります。REST API 化したので外部連携も可能な形になっています（サーバーがそこまで潤沢な環境ではないので、お手柔らかに使ってください）。
【xslx-js-style をどのように使ったか】
ここまでの内容は「本家の Image to Excel をパクってみました」という内容でした。ここからがこのブログエントリの本体ともいえる部分だと思っていて、「これをどうやって作ったのか」という技術的な解説になります。本家のサービスがどのように作られているのかは分からないのですが、自分はこうやってみた、という紹介です。ちなみにプログラミング言語は Node.js で作っています。
改めて、私が作った image2xlsx のソースコードはこちらで公開しています。実際の実装ソースコードはここからも参照できるので興味ある方は是非どうぞ。
この "POST /image" メソッドは概ね以下のようなフローで作られています：
（１）一時フォルダにアップロードされた画像ファイルを受け取る
（２）画像ファイルを開いて、サイズ（横幅、縦幅）を調べる
（３）受け取ったパラメータなどから出力時のサイズ（横幅、縦幅）を求める
（４）Canvas ライブラリを使って仮想的なキャンバスを作り、画像を出力時のサイズで描画する
（５）エクセルワークブック（ファイル）を新規に作成する
（６）エクセルワークシート（タブ）を新規に作成する
（７）（３）で求めたサイズに合わせて画像の各ピクセルぶんのセルをワークシート内に用意する
（８）（４）の画像データを取り出し、１ピクセルごとに RGB 値を取得し、
（９）（８）の結果を各セルの背景色に指定する
（１０）セルの色を指定したワークシートをワークブックに追加する
（１１）ワークブックのデータを取り出し、HTTP レスポンスとして返す
以下、このフローの実装内容を順に説明していきます。まず（１）ですが、ここは multer というファイルアップロード機能を作る時の定番ライブラリがあるので multer を使って実装しています。
該当コードとしてはこのような感じです：
var express = require( 'express' ),
bodyParser = require( 'body-parser' ),
fs = require( 'fs' ),
multer = require( 'multer' ),
{ createCanvas, Image } = require( '@napi-rs/canvas' ),
XLSX = require( 'xlsx-js-style' ),
app = express();
require( 'dotenv' ).config();
var default_px = 'DEFAULT_PX' in process.env ? parseInt( process.env.DEFAULT_PX ) : 2;
var default_width = 'DEFAULT_WIDTH' in process.env ? parseInt( process.env.DEFAULT_WIDTH ) : 100;
app.use( express.static( __dirname + '/public/_doc' ) );
app.use( bodyParser.urlencoded( { extended: true } ) );
app.use( bodyParser.json( { limit: '10mb' } ) );
app.use( express.Router() );
app.use( multer( { dest: './tmp/' } ).single( 'file' ) );
:
app.post( '/image', function( req, res ){
var imgpath = req.file.path;
var outputfilename = '';
try{
var imgtype = req.file.mimetype;
var filename = req.file.originalname;
:
（２）以降で仮想キャンバス機能を使います。フロントエンド JavaScript では HTML5 の Canvas に相当する機能なのですが、node-Canvas というバックエンド用の互換ライブラリ（のプラットフォーム非互換性を解消した @napi-rs/canvas というライブラリ）を使っています。この canvas でアップロードされた画像ファイルを読み込み、横幅と縦幅を取り出します。
（３）は、画像ファイルと一緒に送られてきたサイズに関するパラメータを使い（送られていない場合はデフォルト設定値を使い）、必要に応じて元画像の縦横比に合わせる形で計算も行って、エクセルファイル内のセルの横幅数と縦幅数を求めておきます。
この（２）と（３）に相当する部分のコードはこのようになっています：
:
//. 画像解析
var data = fs.readFileSync( imgpath );
var img = new Image;
img.src = data;
var width = req.body.width ? parseInt( req.body.width ) : -1;
var height = req.body.height ? parseInt( req.body.height ) : -1;
if( width < 0 && height < 0 ){
width = default_width; //. サイズの指定が何もない場合、幅100とする
height = width * img.height / img.width;
}else if( width < 0 ){
width = height * img.width / img.height;
}else if( height < 0 ){
height = width * img.height / img.width;
}
:
（４）では仮想的な Canvas を作って、Canvas 内に元画像を元のサイズから出力時のサイズに拡大・縮小したものを表示（仮想的な Canvas なので実際に表示されるわけではないですが）しています。Canvas に描画されたデータはピクセルごとの情報（今回の場合であれば RGB 値）を取り出して調べることができるようになります。
この部分のコードはこのようにしています：
:
//. リサイズして仮想キャンバスに描画
var canvas = createCanvas( width, height );
var ctx = canvas.getContext( '2d' );
ctx.drawImage( img, 0, 0, img.width, img.height, 0, 0, width, height );
//. 描画した画像のデータを取得
var imagedata = ctx.getImageData( 0, 0, width, height );
:
ここまでは（アップロードされた画像を拡大縮小して、各ピクセル毎の情報を取り出すための準備までは） xlsx-js-style ライブラリを使わずに実装しています。ここからが xlsx-js-style ライブラリの出番です。
（５）この後、各ピクセル毎の情報を調べていくのですが、その前にワークブックを新規に作成します。「ワークブック」＝「エクセルファイル」と考えると理解しやすいと思いますが、ここでの「新規作成」の意味は「新しいエクセルファイルを作って、まだ保存していない状態にする」と思っていてください。なおこの時点ではワークブック内に１つもタブが存在していない状態で作成されています。
xlsx-js-style でワークブックを新規作成するには utils.book_new() というメソッドを実行します：
:
//. ワークブックを作成
var wb = XLSX.utils.book_new();
:
（６）ではワークブックに追加することになるワークシート（タブ）を新規に１つ作成します。
xlsx-js-style でワークシートを新規作成するには utils.aoa_to_sheet() というメソッドを実行します。引数にワークシート内の各列の情報を含めることができますが、この時点では特に指定せずに作成しています：
:
//. ワークシートを作成
var row = [[]];
var ws = XLSX.utils.aoa_to_sheet([row]);
:
（７）はワークシート内で使うことになるセルの列数と行数（つまり画像の横幅と縦幅）の分だけセルのサイズを調整します。
ここでの「セルのサイズ」とは「REST API 実行時に px パラメータとして指定された値（指定されていない場合は default_px の値（＝２）」です。また「セルの列数」とは「Canvas 上に表示されている画像の横幅（＝imagedata.width）」で、「セルの行数」とは「Canvas 上に表示されている画像の縦幅（＝imagedata.height）」のことです。したがって「セルの列数の分だけセルのサイズを調整する」コードは以下のようになります。具体的には各列の幅を { wpx: （セル幅のピクセル数）} というオブジェクトで定義する配列を用意してワークシートオブジェクトの '!cols' 値として設定し、各行の幅は [ hpx: （セル高さのピクセル数） } というオブジェクトで定義する配列を用意してワークシートオブジェクトの '!rows' 値として設定します。具体的には以下のようなコードになります：
:
//. 必要なセルの行数と列数ぶんだけ、幅と高さを指定する
var px = req.body.px ? parseInt( req.body.px ) : default_px;
var wscols = [];
for( var x = 0; x < imagedata.width; x ++ ){
wscols.push( { wpx: px } );
}
var wsrows = [];
for( var y = 0; y < imagedata.height; y ++ ){
wsrows.push( { hpx: px } );
}
ws['!cols'] = wscols;
ws['!rows'] = wsrows;
:
（８）では Canvas 内の各ピクセルにアクセスして RGB 値をそれぞれ取り出し、16進法の "RRGGBB" フォーマットに変換して、
（９）その "RRGGBB" 値をワークシート内の対応するセルの背景色として指定してゆきます。
この（８）と（９）はループ内で以下のように実現しています。ピクセルの RGB 値は Canvas のデータ内に４つごとに（R 値、G 値、B 値、輝値）格納されているのでそれぞれを取り出し、この値を "RRGGBB" というフォーマットに変えて、"A1", "A2", ... といったセルの色として指定しています。また cellname という関数を用意して縦位置、横位置からセル名に変換できるようにしています（この後の（１０）でも使っています）：
:
//. １ピクセルずつ取り出して色を調べる
for( var y = 0; y < imagedata.height; y ++ ){
for( var x = 0; x < imagedata.width; x ++ ){
var index = ( y * imagedata.width + x ) * 4;
var rr = imagedata.data[index]; //. 0 <= xx < 256
var gg = imagedata.data[index+1];
var bb = imagedata.data[index+2];
var alpha = imagedata.data[index+3];
var rrggbb = rgb2hex( rr, gg, bb );
var cname = cellname( x, y );
ws[cname] = { v: "", f: undefined, t: 's', s: { fill: { fgColor: { rgb: rrggbb } } } };
}
}
:
:
function color2hex( c ){
var x = c.toString( 16 );
if( x.length == 1 ){ x = '0' + x; }
return x;
}
function rgb2hex( r, g, b ){
return color2hex( r ) + color2hex( g ) + color2hex( b );
}
function cellname( x, y ){
//. String.fromCharCode( 65 ) = 'A';
var c = '';
var r = ( y + 1 );
while( x >= 0 ){
var m = x % 26;
x = Math.floor( x / 26 );
c = String.fromCharCode( 65 + m ) + c;
if( x == 0 ){
x = -1;
}else{
x --;
}
}
return ( c + r );
}
（１０）（７）、（８）、（９）の処理によって変更されたワークシートの内容をワークブックに反映します。これでレスポンスとして返すエクセルファイル（のデータ）が完成しました。
このコードでは実際に使ったセルの範囲を "A1:（最も右下にあるセルの名前）" という形でワークシートの '!ref' 値に指定してから、作成したワークシートをワークブックに追加する、という処理を実行しています：
:
//. 値が適用される範囲を指定
var cname = cellname( imagedata.width - 1, imagedata.height - 1 );
ws['!ref'] = 'A1:' + cname;
//. ワークシートをワークブックに追加
XLSX.utils.book_append_sheet( wb, ws, filename );
:
（１１）最後に完成したエクセルファイルを HTTP リクエストに対する HTTP レスポンスとして返します。
ここでは、これまでの処理で作成したワークブックのバッファデータを取得して HTTP レスポンスヘッダと合わせる形で返す、ということになるのですが、xlsx-js-style のソースコードを調べてもワークブックのバッファデータを直接取得する関数は用意されていないようでした。というわけで、一旦ワークブックファイルとして書きだし、ワークブックファイルを読み込んだ上で返す（そしてワークブックファイルをアップロード画像と一緒に消す）、というアルゴリズムにしています：
:
//. xlsx化
XLSX.writeFileSync( wb, 'tmp/' + outputfilename );
res.contentType( 'application/vnd.ms-excel' );
res.setHeader( 'Content-Disposition', 'attachment; filename="' + outputfilename + '"' );
var bin = fs.readFileSync( 'tmp/' + outputfilename );
res.write( bin );
res.end();
:
・・と、このような形で xlsx-js-style を使ってエクセルファイルをバックエンドで作成することができました。グラフとかまでは難しそうではありますが、セルのサイズや色を指定したワークシートを作るという程度であれば実現できないことはなさそうで、今後エクセル連携が必要になった場合でも使えそうなライブラリでした。
