レンダリングの順番を変更
Browse files- index.html +12 -12
index.html
CHANGED
@@ -229,6 +229,10 @@
|
|
229 |
</div>
|
230 |
</div>
|
231 |
<div class="col-lg-4" id="controller">
|
|
|
|
|
|
|
|
|
232 |
<h6>Image Settings</h6>
|
233 |
<div class="input-group">
|
234 |
<label for="upload">
|
@@ -243,16 +247,8 @@
|
|
243 |
<label for="faceRemove">
|
244 |
<button id="faceRemoveButton" type="button" class="btn btn-danger">Remove Icon</button>
|
245 |
</label>
|
246 |
-
<div class="vr"></div>
|
247 |
-
<button id="render" type="button" class="btn btn-success">Render</button>
|
248 |
</div>
|
249 |
-
<p><u>All images are processed on your browser. No data are sent to any servers.</u></p>
|
250 |
<h6>Message Window</h6>
|
251 |
-
<div class="input-group">
|
252 |
-
<span class="input-group-text">WindowSize</span>
|
253 |
-
<input name="windowSize" type="range" class="form-control form-range" id="windowSize" value="25"
|
254 |
-
step="1" min="16" max="30">
|
255 |
-
</div>
|
256 |
<div class="input-group">
|
257 |
<span class="input-group-text">TopColor</span>
|
258 |
<input name="topColor" type="color" class="form-control form-control-color" id="topColor"
|
@@ -281,7 +277,7 @@
|
|
281 |
<div class="input-group">
|
282 |
<span class="input-group-text">font-size</span>
|
283 |
<input name="fontSizeInput" type="range" class="form-control form-range" id="fontSizeInput"
|
284 |
-
value="0.8" step="0.01" min="0.
|
285 |
</div>
|
286 |
<div class="input-group">
|
287 |
<button id="textShadowToggleA" type="button" class="btn btn-primary">Text-Stroke
|
@@ -293,6 +289,11 @@
|
|
293 |
class="btn btn-primary opacity-50">Fake-UI</button>
|
294 |
</div>
|
295 |
<h6>Advanced</h6>
|
|
|
|
|
|
|
|
|
|
|
296 |
<div class="input-group">
|
297 |
<span class="input-group-text">Render Scale</span>
|
298 |
<input name="renderScale" type="range" class="form-control form-range" id="renderScale"
|
@@ -366,7 +367,7 @@
|
|
366 |
let width = window.document.documentElement.clientHeight * naturalAspect
|
367 |
let height = window.document.documentElement.clientHeight;
|
368 |
result.classList.remove("d-none");
|
369 |
-
|
370 |
createEditor();
|
371 |
setTimeout(function () {
|
372 |
html2canvas(document.getElementById("edit"), {
|
@@ -390,7 +391,6 @@
|
|
390 |
return x;
|
391 |
}
|
392 |
}).then(canvas => {
|
393 |
-
result.textContent = "";
|
394 |
let i = document.createElement("img");
|
395 |
i.setAttribute("src", canvas.toDataURL('image/png'));
|
396 |
result.appendChild(i);
|
@@ -522,7 +522,7 @@
|
|
522 |
}
|
523 |
});
|
524 |
document.querySelectorAll("#userInterface > div").forEach(el => {
|
525 |
-
el.addEventListener("click", function(){
|
526 |
document.getElementById("render").click();
|
527 |
});
|
528 |
});
|
|
|
229 |
</div>
|
230 |
</div>
|
231 |
<div class="col-lg-4" id="controller">
|
232 |
+
<h5><u>All images are processed on your browser. No data are sent to any servers.</u></h5>
|
233 |
+
<div class="input-group">
|
234 |
+
<button id="render" type="button" class="btn btn-success">Render</button>
|
235 |
+
</div>
|
236 |
<h6>Image Settings</h6>
|
237 |
<div class="input-group">
|
238 |
<label for="upload">
|
|
|
247 |
<label for="faceRemove">
|
248 |
<button id="faceRemoveButton" type="button" class="btn btn-danger">Remove Icon</button>
|
249 |
</label>
|
|
|
|
|
250 |
</div>
|
|
|
251 |
<h6>Message Window</h6>
|
|
|
|
|
|
|
|
|
|
|
252 |
<div class="input-group">
|
253 |
<span class="input-group-text">TopColor</span>
|
254 |
<input name="topColor" type="color" class="form-control form-control-color" id="topColor"
|
|
|
277 |
<div class="input-group">
|
278 |
<span class="input-group-text">font-size</span>
|
279 |
<input name="fontSizeInput" type="range" class="form-control form-range" id="fontSizeInput"
|
280 |
+
value="0.8" step="0.01" min="0.25" max="1">
|
281 |
</div>
|
282 |
<div class="input-group">
|
283 |
<button id="textShadowToggleA" type="button" class="btn btn-primary">Text-Stroke
|
|
|
289 |
class="btn btn-primary opacity-50">Fake-UI</button>
|
290 |
</div>
|
291 |
<h6>Advanced</h6>
|
292 |
+
<div class="input-group">
|
293 |
+
<span class="input-group-text">WindowSize</span>
|
294 |
+
<input name="windowSize" type="range" class="form-control form-range" id="windowSize" value="25"
|
295 |
+
step="1" min="16" max="30">
|
296 |
+
</div>
|
297 |
<div class="input-group">
|
298 |
<span class="input-group-text">Render Scale</span>
|
299 |
<input name="renderScale" type="range" class="form-control form-range" id="renderScale"
|
|
|
367 |
let width = window.document.documentElement.clientHeight * naturalAspect
|
368 |
let height = window.document.documentElement.clientHeight;
|
369 |
result.classList.remove("d-none");
|
370 |
+
result.textContent = "";
|
371 |
createEditor();
|
372 |
setTimeout(function () {
|
373 |
html2canvas(document.getElementById("edit"), {
|
|
|
391 |
return x;
|
392 |
}
|
393 |
}).then(canvas => {
|
|
|
394 |
let i = document.createElement("img");
|
395 |
i.setAttribute("src", canvas.toDataURL('image/png'));
|
396 |
result.appendChild(i);
|
|
|
522 |
}
|
523 |
});
|
524 |
document.querySelectorAll("#userInterface > div").forEach(el => {
|
525 |
+
el.addEventListener("click", function () {
|
526 |
document.getElementById("render").click();
|
527 |
});
|
528 |
});
|