thekevinscott
commented
1 year ago Thanks for the jsfiddle link - it's always helpful when someone takes the time to create a reproducible example!
A few things:
- Like I mentioned here, you'll want to use
esrgan-thickto get the same results as the homepage examples.esrgan-slimandesrgan-mediumare lower quality models that run much faster. - You can't instantiate the model by simply passing a URL to the model JSON, as there's model configuration that needs to be set up as well. You need to pass a reference to the model configuration file. This example walks through the specifics of installing and using a model. If you're referencing the files outside of npm (like it appears you're doing here) you'll want to use the UMD builds, information on that can be found here.
- This is something I've never encountered: it appears that if you set an explicit width and height on the input image, those dimensions carry through even if the original image src is smaller. Here, you're setting an image width and height of 512px which, for the browser, can take a long time to process. Instead I'd recommend you pass the original image src, which will process faster. Otherwise, you'll be upscaling a 512px image up to 2048.
- Your original image is 128px and you've set the width and height to 512, so I assume you're looking for a 4x upscale. The larger the upscale, the less accurate the upscaled image will be.
Here is a JSFiddle that implements the above bullets: https://jsfiddle.net/thekevinscott/f5e3h189/39/
av01d
Describe the bug I am having trouble reproducing the rather awesome upscaling results I see on www.upscalerjs.com. The carousel on top of that page shows that the upscaled images are indeed much more detailed/sharp than the originals. When I set up a similar test on jsfiddle, the results are much less stellar. https://jsfiddle.net/av01d/gopuyeqs/
I am clearly missing something... but what?
To Reproduce Visit https://jsfiddle.net/av01d/gopuyeqs/
Expected behavior Clear, sharp upscaled images.
Screenshots