JSFiddle - React, Tailwind, and code Playground

IPS qualityCalculation

by web-nfo.com

HTML

<input type="text" id="originalWidth" value="2560" />
<input type="text" id="resizedWidth" value="3000" />
<input type="button" id="submit" value="OK" />

<div id="result"></div>

JavaScript

function getFaceQuality(originalWidth, resizedWidth) // 0=bad, 1=medium, 2=good
{
    // Define the image quality here (width)
    var faceWidthGood = 400; // 200dpi, good (this value and up)
    var faceWidthMedium = 250; // 200dpi, medium (this value and up, everything below: bad)
    
    originalWidth = parseInt(originalWidth);
    resizedWidth = parseInt(resizedWidth);
    var zoomFactor = resizedWidth / originalWidth;
    
    var calculatedFaceWidth = faceWidthGood / zoomFactor;
    
    var qualityImage = 0;
    if(calculatedFaceWidth >= faceWidthGood) {
        qualityImage = 2;
    } else if(calculatedFaceWidth > faceWidthMedium) {
        qualityImage = 1;
    }
    return qualityImage;
}

$(document).ready(function(){
    $('#submit').click(function(){
        var originalWidth = $('#originalWidth').val();
        var resizedWidth = $('#resizedWidth').val();
        var quality = getFaceQuality(originalWidth, resizedWidth);
        
        $('#result').html('<img src="https://cs.photoprintit.com/web/cops2010/images/default/ips_dflt_quality'+ quality +'.png"/>');
    });
    $('#originalWidth').keyup(function(){
        $('#submit').trigger('click');
    });
    $('#resizedWidth').keyup(function(){
        $('#submit').trigger('click');
    });
    $('#originalWidth').change(function(){
        $('#submit').trigger('click');
    });
    $('#resizedWidth').change(function(){
        $('#submit').trigger('click');
    });
    $('#submit').trigger('click');
});