haruyan-hopemucci · haruyan-hopemucci · Dec 2, 2023 · Dec 2, 2023 · Dec 2, 2023 · Dec 2, 2023
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" />

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