Troubleshooting Poor Upscaling Quality with Anime4k.js

Open jay8651 opened this issue 2 years ago • 1 comments

Hi,

I have successfully compiled under Windows using Node.js, and as a result, I got "anime4k.js". I've also created a simple HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Anime4K.js Image Upscaling</title>
    <script src="anime4k.js"></script>
</head>
<body>
    <h2>Original Image</h2>
    <img id="originalImage" src="input.jpg" alt="Original Image" width="400">
    <h2>Upscaled Image</h2>
    <canvas id="upscaledCanvas"></canvas>

    <script>
        window.onload = function() {
            // Get the image source and canvas elements
            var originalImage = document.getElementById('originalImage');
            var canvasElement = document.getElementById('upscaledCanvas');
            var textureSource = originalImage;

            // Create an instance of Anime4KJS.ImageUpscaler
            const upscaler = new Anime4KJS.ImageUpscaler(Anime4KJS.ANIME4K_HIGHEREND_MODE_A_FAST  /* PROFILE */);

            // Attach the original image and canvas element to the upscaler
            upscaler.attachSource(textureSource, canvasElement);

            // Perform the upscaling process
            upscaler.upscale();
        };
    </script>
</body>
</html>

However, the upscaling effect is worse than the original image. Could you tell me what I did wrong?

I will provide the compiled Anime4k.js. https://github.com/jaymiouo/test_Anime4k.js

Feb 22 '24 13:02 jay8651

@jaymiouo Sorry for late response. width attribute is present, rendered as specified width (downscaling) then upscale.

Please specify the size of the original image with CSS.

Mar 06 '24 01:03 monyone