Update index.html

index.html

@@ -91,6 +91,7 @@
 
         #result>canvas {
             transform-origin: top;
+            max-height: 100vh;
         }
 
         .relative {
@@ -177,19 +178,19 @@
                     </div>
                 </div>
                 <div class="col-lg-4" id="controller">
-                    <h6>画像設定</h6>
+                    <h6>Image Settings</h6>
                     <div class="input-group">
                         <label for="upload">
                             <button id="uploadButton" type="button" class="btn btn-primary">Set Image</button>
                         </label>
                         <input id="upload" type="file" class="d-none">
-                        <label for="faceUpload">
-                            <button id="faceUploadButton" type="button" class="btn btn-primary">Face Icon</button>
-                        </label>
                         <input id="faceUpload" type="file" class="d-none">
                     </div>
                     <div class="input-group">
                         <label for="faceUpload">
+                            <button id="faceUploadButton" type="button" class="btn btn-primary">Face Icon</button>
+                        </label>
+                        <label for="faceRemove">
                             <button id="faceRemoveButton" type="button" class="btn btn-danger">Remove Icon</button>
                         </label>
                     </div>
@@ -229,6 +230,12 @@
                     <div class="input-group">
                         <button id="textShadowToggle" type="button" class="btn btn-primary">TEXT-STROKE</button>
                     </div>
+                    <h6>Advanced</h6>
+                    <div class="input-group">
+                        <span class="input-group-text">Render Scale</span>
+                        <input type="range" class="form-control form-range" id="renderScale" value="2" step="0.5"
+                            min="1" max="4">
+                    </div>
                 </div>
             </div>
         </div>
@@ -282,7 +289,7 @@
             createEditor();
             setTimeout(function () {
                 html2canvas(document.getElementById("edit"), {
-                    scale: 2,
+                    scale: document.getElementById("renderScale").value,
                     windowWidth: image.naturalWidth * 2,
                     windowHeight: image.naturalHeight * 2,
                     width: image.naturalWidth,
@@ -304,8 +311,8 @@
                 }).then(canvas => {
                     result.textContent = "";
                     result.appendChild(canvas);
-                    let scale = Math.min.apply(null, [window.document.documentElement.clientWidth / width, window.document.documentElement.clientHeight / height, 1])
-                    canvas.style.transform = "scale(" + scale + ")";
+                    canvas.style.width = null;
+                    canvas.style.height = null;
                 });
             }, 1);
         }