Merge pull request #28 from haruyan-hopemucci/develop/support_heic_fo…

…rmat heic対応(v0.4.0)
haruyan-hopemucci · Dec 2, 2023 · 3b9b1ce · 3b9b1ce
2 parents 5bb877c + 386e2dd
commit 3b9b1ce
Show file tree

Hide file tree

Showing 6 changed files with 356 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@ Looks Good To Neo Image Generator via clipboard
 
 ## summary
 
-クリップボードから画像データを貼り付けして、LGTNテキストを合成した画像をクリップボードに書き込むツールです。
+クリップボードから画像データを貼り付けして、LGTN(LGTM)テキストを合成した画像をクリップボードに書き込むツールです。
 
 [現在公開しているGithub Pagesへのリンク](https://haruyan-hopemucci.github.io/lgtn/)
 
@@ -13,10 +13,16 @@ Looks Good To Neo Image Generator via clipboard
 - 書き込んだクリップボードの画像はそのままGithubのIssueやPullRequestのテキストボックスにペーストすることができる
 - フロントエンド(javascript)だけで実装されているのでサーバーレス運用が可能。
 
+## Supported file formats
+
+- image/jpeg
+- image/png
+- image/heic (v0.4.0以降)
+
 ## Supported Environments
 
 - Windows10
   - Google Chrome 119以降
   - Microsoft Edge 119以降
 - MacOS Venture
-  - Google Chrome 119以降
+  - Google Chrome 119以降
diff --git a/docs/index.html b/docs/index.html
@@ -7,6 +7,7 @@
   <title>LGTN Generator</title>
   <script src="https://code.jquery.com/jquery-3.7.1.min.js"
     integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+  <script src="./js/heic2any.js"></script>
   <script src="./js/app.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous" />
@@ -18,7 +19,7 @@
 
 <body>
   <main class="container">
-    <h1>LGTN Generator <small>v0.3.0</small></h1>
+    <h1>LGTN Generator <small>v0.4.0</small></h1>
     <div id="paste-area">
       <div id="paste-area-message">
         クリップボードにコピーした画像をペーストしてください。

diff --git a/docs/js/app.js b/docs/js/app.js
@@ -31,12 +31,30 @@ $(function () {
       setMessage("ペーストされたデータが画像ではありません");
       return true;
     }
-
     setMessage("LGTN画像を生成しています...");
-
-    generateLGTN(event.clipboardData.items[0]);
+    const fileType = event.clipboardData.items[0].type
+    switch (fileType) {
+      case 'image/heic':
+        convertHeicToPng(event.clipboardData.items[0])
+        break
+      case 'image/png':
+      case 'image/jpeg':
+        generateLGTN(event.clipboardData.items[0])
+        break
+      default:
+        setMessage("未対応の画像形式です。");
+    }
   });
 
+  const convertHeicToPng = async function (clipboardItem) {
+    const imageFile = clipboardItem.getAsFile();
+    const conversionResult = await heic2any({ blob: imageFile })
+    const dataUrl = URL.createObjectURL(conversionResult)
+    const imgEl = document.querySelector("#pasted-image");
+    imgEl.addEventListener("load", drawCanvas);
+    imgEl.src = dataUrl;
+  }
+
   const generateLGTN = async function (clipboardItem) {
     const imageFile = clipboardItem.getAsFile();
     const imgEl = document.querySelector("#pasted-image");

diff --git a/docs/js/heic2any.js b/docs/js/heic2any.js
diff --git a/survey/heic-convert-test.html b/survey/heic-convert-test.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      #target {
+        max-width: 100vw;
+      }
+      img {
+        max-width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>target</h1>
+    <div id="target"></div>
+
+    <script src="../docs/js/heic2any.js"></script>
+    <script>
+      fetch("./test.heic")
+        .then((res) => res.blob())
+        .then((blob) =>
+          heic2any({
+            blob,
+          })
+        )
+        .then((conversionResult) => {
+          var url = URL.createObjectURL(conversionResult);
+          document.getElementById(
+            "target"
+          ).innerHTML = `<a target="_blank" href="${url}"><img src="${url}"></a>`;
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    </script>
+  </body>
+</html>
diff --git a/survey/test.heic b/survey/test.heic