COM経由でExcelを操作するための準備

依存関係から右クリックでCOM参照の追加を選択

Microsoft.Excel XX.X ObjectLibrary を選択(要Excelインストール)

OKで閉じる

ClosedXMLでExcelを操作するための準備

Nugetから ClosedXML をインストール

ExcelDataReaderでExcelを操作するための準備

Nugetから ExcelDataReader をインストール

ExcelDataReader.DataSetもインストールしてください
AsDataSet() を使うのに必要になってきます

EPPlusでExcelを操作するための準備

Nugetから EPPlus をインストール

NPOIでExcelを操作するための準備

Nugetから NPOIをインストール

C#からExcel操作方法のメモ

ClosedXML、ExcelDataReader、EPPlus、NPOIのドキュメント・チュートリアル

Excel(COM)、ClosedXML、ExcelDataReader、NPOI、EPPlusを使えるようにする

早見表

ワークブック

ワークシート

(補足)シートの解除は、NPOIだとパス無し保護は解除できても、パス有り保護は解除できなさそう

セル

参考

ClosedXML, ExcelDataReader, EPPlus, NPOIがパスワード解除について

Officeのサーバー上でのCOM経由による自動操作について

Microsoft.Office.Interop.Excel でオブジェクトの解放について

解放ヘルパークラスを使ったオブジェクトの解放

R1C1情報からA1形式への変換

EPPlus/NPOIで既存ファイルを開き、保存する方法

EPPlusでファイル作成、保存方法

回転せずに４つ横に画像を並べて表示するならこんな感じ。

(() => {
    let img = new Image();
    img.addEventListener('load', () => {
        drawImage(img);
    }, false);
    img.src = "./Image.png";
})();

function drawImage(img) {
    let canvas = document.querySelector("#main");
    let context = canvas.getContext("2d");

    let imgSize = 64;
    for (let i = 0; i < 4; i++) {
        let imgX = imgSize * i;
        let imgY = 0;
        context.drawImage(img, imgX, imgY);
    }
}

これを45°ずつ回転させて表示させると

(() => {
    let img = new Image();
    img.addEventListener('load', () => {
        drawImage(img);
    }, false);
    img.src = "./Image.png";
})();

function drawImage(img) {
    let canvas = document.querySelector("#main");
    let context = canvas.getContext("2d");

    let imgSize = 64;
    for (let i = 0; i < 4; i++) {
        let angle = 45 * i;
        let moveX = imgSize / 2 + imgSize * i;
        let moveY = imgSize / 2;

        let imgX = -imgSize / 2;
        let imgY = -imgSize / 2;

        // 描画状態保存
        context.save();

        // 原点を移動させる
        context.translate(moveX, moveY);

        // canvasを回転
        context.rotate(angle);

        // 画像表示
        context.drawImage(img, imgX, imgY);

        // saveの状態に戻す
        context.restore();
    }
}

1ループ目
translateで原点移動

キャンバスを0°回転させて、画像配置(左上の位置を指定)

restoreによって 、 fillStyle, strokeStyle, lineWidthなどのスタイルや
translate, rotate, scaleや globalAlpha, clipなどがsaveの状態に戻る
ここではsave後にrotateしただけなので、画像を表示した状態で回転が元の状態に戻ることになる

2ループ目
translate原点移動

キャンバスを45°回転

画像配置(左上の位置を指定)

restoreによって 回転をもとに戻す

これを繰り返すと