Update index.html

index.html

@@ -64,12 +64,19 @@
             height: 33.3333%;
         }
 
+        :root {
+            --messageWindowSize: 25%;
+        }
+        #emptySpace {
+            height: calc(100% - var(--messageWindowSize));
+        }
         #messageWindow {
             margin: 0;
             padding: 0;
-
+            height: var(--messageWindowSize);
         }
 
+
         #left,
         #right {
             height: 100%;
@@ -89,7 +96,7 @@
             text-align: center;
         }
 
-        #result>canvas {
+        #result>img {
             transform-origin: top;
             max-width: 100vw;
             max-height: 100vh;
@@ -133,9 +140,9 @@
             </div>
             <div class="row">
                 <div class="col-lg-8 p-0 m-0 relative" id="edit">
-                    <div class="row h-75 p-0 m-0">
+                    <div id="emptySpace" class="row p-0 m-0">
                     </div>
-                    <div id="messageWindow" class="row h-25 p-0 m-0">
+                    <div id="messageWindow" class="row p-0 m-0">
                         <div id="left" class="col-3 p-0 m-0" style="height:133%;position:relative;top:-33%;">
                             <div class="p-0" style="height:100%">
                                 <div class="row2 row2-25">
@@ -200,6 +207,10 @@
                     </div>
                     <p><u>画像は全てキャッシュで処理されサーバーには一切送信されません。</u></p>
                     <h6>Message Window</h6>
+                    <div class="input-group">
+                        <span class="input-group-text">WindowSize</span>
+                        <input type="range" class="form-control form-range" id="windowSize" value="25" step="1" min="10" max="100">
+                    </div>
                     <div class="input-group">
                         <span class="input-group-text">TopColor</span>
                         <input type="color" class="form-control form-control-color" id="topColor" value="#AA6465">
@@ -311,9 +322,9 @@
                     }
                 }).then(canvas => {
                     result.textContent = "";
-                    result.appendChild(canvas);
-                    canvas.style.width = null;
-                    canvas.style.height = null;
+                    let i = document.createElement("img");
+                    i.setAttribute("src", canvas.toDataURL('image/png'));
+                    result.appendChild(i);
                 });
             }, 1);
         }
@@ -397,6 +408,9 @@
                 f.textContent = 'body { font-family: "' + i.value.trim() + '"; }';
             }
         });
+        document.getElementById("windowSize").addEventListener("change", function () {
+            document.documentElement.style.setProperty('--messageWindowSize', this.value + "%");
+        });
         document.getElementById("textShadowToggle").addEventListener("click", function () {
             this.classList.toggle("opacity-50");
             if (this.classList.contains("opacity-50")) {