【JavaScript】JPG画像のEXIF情報を取得して回転表示させる

1<script type="text/javascript" src="{{ url_for('static', filename='js/rotate_image.js') }}"></script> 
2<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
3<form method="post" enctype="multipart/form-data">
4   <input type="file" name="imgFile" id="imgFile">
5</form> <img id="imgPreview">

1/*
2 * 画像ファイル選択時にブラウザに表示する
3 */
4document.getElementById("imgFile")
5    .addEventListener("change", async function (e) {
6    
7    let imgElement = new Image();
8
9    //imgタグの要素取得
10    let imgPreview = document.getElementById("imgPreview");
11
12    if (e.target.files[0]){
13        //exif情報を取得する。
14        //取得には時間がかかるのでasync/awaitを使って処理を待つ。
15        let orientation = await getOrientation(e.target.files[0]);
16
17        //orientationから回転角度を設定する
18        const angle = setAngle(orientation);
19        
20        //blobUrlを作成する
21        let blobUrl = window.URL.reateObjectURL(e.target.files[0]);
22
23        //blobURLから画像データを読み込む
24        //画像の読込には時間がかかるのでasync/awaitで処理を待つ。
25        imgElenent = await loadImage(blobUrl);
26        
27        imgPreview.src = imgElement.src;
28
29        //transformで回転角度を設定する。
30        imgPreview.style.transform = "rotate(" + angle + "deg)";
31        
32    }
33});

1function getOrientation(imgFile){
2    return new Promise( (resolve, reject) => {
3        EXIF.getData(imgFile, function() {
4            resolve(imgFile.exifdata.Orientation);
5            //取得したimgFile.exifdata.Orientationに対し、function内で処理を進めることも可能
6        });
7    });
8}

1function setAngle(orientation){
2    switch(orientation){
3    case 1:    //回転なし
4        angle = 0;
5        break;
6    case 3:    //元画像を180度回転しているので、180度回転させて元に戻す。
7        angle = 180;
8        break;
9    case 6:    //元画像を270度回転しているので、90度回転させて元に戻す。
10        angle = 90;
11        break;
12    case 8:    //元画像を90度回転しているので、270度回転させて元に戻す。
13        angle = 270;
14        break;
15    default:
16        angle = 0;
17        break;
18    }
19    return angle;
20}

1function loadImage(blobImg){
2    return new Promise( (resolve, reject) => {
3        const img = new Image();
4        img.onload = () => resolve(img);
5        img.onerror = (e) => reject(e);
6        img.src = blobImg;
7    });
8}