SVG images are upscaled

jobtalle · May 30, 2023 · 18470f9 · 18470f9
1 parent 55d4dff
commit 18470f9
Showing 1 changed file with 23 additions and 9 deletions.
diff --git a/js/sdfMaker.js b/js/sdfMaker.js
@@ -7,7 +7,8 @@ import {ShaderPreview} from "./gl/shaderPreview.js";
 export class SDFMaker {
     static #INPUT_TARGET_HOVER = "hover";
     static #SIZE = Number.parseInt(getComputedStyle(document.body).getPropertyValue("--size"));
-    static #PREVIEW_RADIUS = SDFMaker.#SIZE * .25;
+    static #PREVIEW_RADIUS = SDFMaker.#SIZE * .2;
+    static #SVG_UPSCALE = 2048;
 
     #inputTarget;
     #inputMessage;
@@ -177,27 +178,37 @@ export class SDFMaker {
         this.#shaderPreview.setAspect(this.#previewCanvas.width / this.#previewCanvas.height);
     }
 
-    #loadImage(name, image) {
+    #loadImage(name, image, upscale) {
+        const scale = upscale ? Math.min(
+            SDFMaker.#SVG_UPSCALE / image.width,
+            SDFMaker.#SVG_UPSCALE / image.height) : 1;
+
+        this.#settingWidth.value = this.#outputWidth = image.width;
+        this.#settingHeight.value = this.#outputHeight = image.height;
+
         this.#settingWidth.disabled = this.#settingHeight.disabled = this.#settingRadius.disabled = this.#settingThreshold.disabled = false;
         this.#inputMessage.style.display = "none";
         this.#inputInfo.innerText = `
             Name: ${name}
-            Size: ${image.width} x ${image.height}
+            Size: ${this.#outputWidth} x ${this.#outputHeight}
             `;
 
-        this.#settingWidth.value = this.#inputTarget.width = this.#inputWidth = this.#outputWidth = image.width;
-        this.#settingHeight.value = this.#inputTarget.height = this.#inputHeight = this.#outputHeight = image.height;
+        this.#inputTarget.width = this.#inputWidth = Math.round(image.width * scale);
+        this.#inputTarget.height = this.#inputHeight = Math.round(image.height * scale);
+
         this.#aspect = image.width / image.height;
 
         this.#resizePreview();
 
         this.#inputTarget.getContext("2d").drawImage(
             image,
             0,
-            0);
+            0,
+            this.#inputWidth,
+            this.#inputHeight);
 
         gl.bindTexture(gl.TEXTURE_2D, this.#input);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.#inputTarget);
 
         this.#loaded = true;
     }
@@ -210,17 +221,20 @@ export class SDFMaker {
 
         if (item.kind === "file") {
             const file = item.getAsFile();
+            let upscale = false;
 
             switch (file.type) {
-                case "image/png":
                 case "image/svg+xml":
+                    upscale = true;
+
+                case "image/png":
                     const reader = new FileReader();
 
                     reader.onload = () => {
                         const image = new Image();
 
                         image.onload = () => {
-                            this.#loadImage(file.name, image);
+                            this.#loadImage(file.name, image, upscale);
                         };
 
                         image.src = reader.result;