Rev.20220805001

画像保存機能の追加クリップボードコピーボタンの追加 EXIFにLensModelがない場合を考慮したテキスト出力に変更
miyacorata · Aug 4, 2022 · 49fa180 · 49fa180
1 parent 96d7170
commit 49fa180
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 5 deletions.
diff --git a/ImagePublisher.js b/ImagePublisher.js
@@ -30,7 +30,7 @@ const updatePreview = () => {
         console.dir(EXIF.getAllTags(this));
 
         // 撮影日
-        const dateRaw = String(EXIF.getTag(this, 'DateTimeOriginal')).split(' ');
+        const dateRaw = String(EXIF.getTag(this, 'DateTimeOriginal') ?? '').split(' ');
         document.getElementById('DateTimeOriginal').innerText = exifData['DateTimeOriginal']
             = dateRaw[0].replaceAll(':','/');
 
@@ -57,7 +57,7 @@ const updatePreview = () => {
         }
         commonTags.map((tag) => {
             document.getElementById(tag).innerText = exifData[tag] =
-                (prefix[tag] ?? '') + EXIF.getTag(this, tag) + (suffix[tag] ?? '');
+                (prefix[tag] ?? '') + (EXIF.getTag(this, tag) ?? '') + (suffix[tag] ?? '');
         });
 
         // canvas#preview に画像を表示
@@ -93,8 +93,9 @@ const updatePreview = () => {
             summary.push(document.getElementById('description').value);
             summary.push(exifData['DateTimeOriginal'] + '  ' + document.getElementById('author').value);
             summary.push(
-                exifData['Model'] + ' - ' + exifData['LensModel'] + ' (' + exifData['FocalLength'] + ') ' +
-                exifData['FNumber'] + ' ' + exifData['ExposureTime'] + ' ISO' + exifData['ISOSpeedRatings']
+                exifData['Model'] + ' - ' + exifData['LensModel'] + (exifData['LensModel'] ? ' - ' : ' ') +
+                exifData['FocalLength'] + ' ' + exifData['FNumber'] + ' ' +
+                exifData['ExposureTime'] + ' ISO' + exifData['ISOSpeedRatings']
             );
             console.dir(summary);
             summary.reverse().map((text) => {
@@ -109,7 +110,48 @@ const updatePreview = () => {
     });
 };
 
+const saveImage = function () {
+    const a = document.createElement('a');
+    const title = document.getElementById('title').value;
+    switch (this.type) {
+        case 'png':
+            a.href = preview.toDataURL('image/png', 100);
+            a.download = (title ? title : 'image')+'.png';
+            break;
+        case 'jpg':
+            a.href = preview.toDataURL('image/jpeg', 100);
+            a.download = (title ? title : 'image')+'.jpg';
+            break;
+        default:
+            throw '画像タイプが正しく指定できていないかもしれません';
+    }
+    a.click();
+}
+
+const copyImage = function () {
+    try {
+        preview.toBlob((blob) => {
+            const data = new ClipboardItem({
+                'image/png': blob
+            });
+            navigator.clipboard.write([data]).then(() => {
+                document.getElementById('cb-copy').classList.add('is-success');
+                setTimeout(() => {
+                    document.getElementById('cb-copy').classList.remove('is-success');
+                }, 1000);
+            });
+        }, 'image/png', 100);
+    } catch (e) {
+        alert("何らかのエラーが発生しました。\n開発者ツールで詳細を確認できます。");
+        console.dir(e);
+    }
+}
+
 document.getElementById('image-input').addEventListener('change', updatePreview);
 document.getElementById('author').addEventListener('change', updatePreview);
 document.getElementById('title').addEventListener('change', updatePreview);
 document.getElementById('description').addEventListener('change', updatePreview);
+
+document.getElementById('png-save').addEventListener('click', {handleEvent: saveImage, type: 'png'});
+document.getElementById('jpg-save').addEventListener('click', {handleEvent: saveImage, type: 'jpg'});
+document.getElementById('cb-copy').addEventListener('click', copyImage);
diff --git a/index.html b/index.html
@@ -100,8 +100,28 @@ <h2 class="title is-4">画像データやタイトルの入力</h2>
     <section class="column is-half-desktop">
         <div class="box">
             <h2 class="title is-4">プレビュー</h2>
-            <p class="subtitle is-6">Twitterとかに投げるときはクリップボードにコピーしてください</p>
+            <p class="subtitle is-6">画像としてDLするかクリップボードにコピーすることができます。</p>
             <canvas id="preview" width="1920" height="1280" style="width: 100%; background: lightgray"></canvas>
+            <div class="buttons">
+                <button class="button" id="jpg-save">
+                    <span class="icon is-small">
+                        <i class="fas fa-download"></i>
+                    </span>
+                    <span>JPEGで保存</span>
+                </button>
+                <button class="button" id="png-save">
+                    <span class="icon is-small">
+                        <i class="fas fa-download"></i>
+                    </span>
+                    <span>PNGで保存</span>
+                </button>
+                <button class="button is-outlined" id="cb-copy">
+                    <span class="icon is-small">
+                        <i class="fas fa-clipboard"></i>
+                    </span>
+                    <span>クリップボードにコピー</span>
+                </button>
+            </div>
             <p class="notification is-info is-light">
                 画像は縦横比を維持したまま横幅を1920pxにリサイズします。<br>
                 テキストのフォントはインストールされていれば