Pixels Per Inch PPI Calculator Script

Pixels Per Inch PPI Calculator Script Code

A complete PPI Pixels Per Inch Calculator Script Code can be used for any website page and posted in the body portion.

The design layout and color style can be edited very easily. Function adjustment and percentage of love calculation are tough.


    <link rel="stylesheet" type="text/css" href="styles/style.css">
    <link rel="icon" href="images/calc.png">
<!-- Start main -->
    <div class="container-fluid">
    	<div class="container">
    	</div>
    	<!-- Preset Form -->
    	<div id="preset-row" class="row d-flex border-top p-3">
    		<div class="col-sm-3 px-0 text-center">
    			<p>Preset image formats:</p>
    		</div>
    		<div class="col-sm-6">
    			<select id="preset-select" class="form-control">
    				<option value="0" selected>Select an image size</option>
    				<option value="1">15x22.5mm (Canon APS-C sensor)</option>
    				<option value="2">16x24mm (Nikon APS-C sensor)</option>
    				<option value="3">24x36mm (35mm film)</option>
    				<option value="4">32.9x43.8mmm (Hasselblad 50MP sensor)</option>
    				<option value="5">40x53.4mmm (Hasselblad 100MP sensor)</option>
    				<option value="6">45x60mm (4.5x6cm 120 film)</option>
    				<option value="7">60x60mm (6x6cm 120 film)</option>
    				<option value="8">60x90mm (6x9cm 120 film)</option>
    				<option value="9">102x127mm (4x5in large format film)</option>
    			</select>
    		</div>
    		<div class="col-sm-3 form-result">
    			<button id="clear-preset" type=button class="btn btn-warning btn-block">
    				Clear fields
    			</button>
    		</div>
    	</div>
	    <!-- Main Form -->
	    <div class="row border p-3">

	    	<!-- PPI -->
	    	<div class= "col-sm-4">
		    	<!-- Form Template (card) -->
		    	<form class = "form border border-danger rounded">
		    		<div class="card-title text-center">
		    			<p><strong>Rankbp.com PPI calculator</strong></p>
		    		</div>
			    	<div class="form-group">
			    		<label>Width (mm):</label>
			    		<input id="ppi-mm" type="number" name="number"
			    		class="form-control mm-w-input">
			    	</div>
			    	<div class="form-group">
			    		<label>Width (pixels):</label>
			    		<input id="ppi-pixels" type="number" name="number"
			    		class="form-control">
			    	</div>
			    	<div class="alert alert-danger">
			    		pixels / inch
			    	</div>
			    	<div class="form-result">
							<button id="ppi-get"
							type="button"
							class="btn btn-danger btn-block"
							data-info="calc">Get PPI</button>
			    	</div>
			   	</form>
			</div>

			<!-- Pixels -->
	    	<div class= "col-sm-4">
		    	<!-- Form Template -->
		    	<form class = "form border border-success rounded">
		    		<div class="card-title text-center">
		    			<p><strong>Size & PPI -> Pixels</strong></p>
		    		</div>
		    		<div class="form-group">
			    		<label>Height (mm):</label>
			    		<input id="pixels-height" type="number" name="number" class="form-control mm-h-input">
			    	</div>
			    	<div class="form-group">
			    		<label>Width (mm):</label>
			    		<input id="pixels-width" type="number" name="number" class="form-control mm-w-input">
			    	</div>
			    	<div class="form-group">
			    		<label>PPI:</label>
			    		<input id="pixels-ppi" type="number" name="number" class="form-control">
			    	</div>
			    	<div class="alert alert-success">
			    		pixels x pixels
			    	</div>
			    	<div class="form-result">
							<button id="pixels-get"
							type="button"
							class="btn btn-success btn-block"
							data-info="calc">Get Pixels</button>
			    	</div>
			   	</form>		   	
			</div>

			<!-- Size -->
			<div class= "col-sm-4">
		    	<!-- Form Template -->
		    	<form class = "form border border-primary rounded">
		    		<div class="card-title text-center">
		    			<p><strong>Pixels & PPI -> Size</strong></p>
		    		</div>
		    		<div class="form-group">
			    		<label>Height (pixels):</label>
			    		<input id="size-height" type="number" name="number" class="form-control">
			    	</div>
			    	<div class="form-group">
			    		<label>Width (pixels):</label>
			    		<input id="size-width" type="number" name="number" class="form-control">
			    	</div>
			    	<div class="form-group">
			    		<label>PPI:</label>
			    		<input id="size-ppi" type="number" name="number" class="form-control">
			    	</div>
			    	<div class="alert alert-primary">
			    		mm x mm
			    	</div>
			    	<div class="form-result">
							<button id="size-get"
							type="button"
							class="btn btn-primary btn-block"
							data-info="calc">Get Size</button>
			    	</div>
			   	</form>		   	
			</div>
		</div>

	</div>


	<script type="text/javascript" src="dpiConverter.js"></script>


    </textarea>
    </div><br><br>
      <div class="row text-center">dpiConverter.js
 <textarea rows="18" cols="50">
const presets = {
	0: undefined,
	1: {h:15, w:22.5},
	2: {h:16, w:24},
	3: {h:24, w:36},
	4: {h:32.9, w:43.8},
	5: {h:40, w:53.4},
	6: {h:45, w:60},
	7: {h:60, w:60},
	8: {h:60, w:90},
	9: {h:102, w:127}
}

const defaultMessages = ["pixels / inch", "pixels x pixels", "mm x mm"]

// CONVERTERS
const convert = {
	// Convert pixels to megapixels
	pixToMP: (pixels) => pixels / 1000000,
	// Convert megapixels to pixels
	mpToPix: (mp) => mp * 1000000,
	// Convert between MM and IN
	mmToIn: (mm) => mm / 25.4,
	inToMM: (inch) => inch * 25.4
}

// FORMULAE

//1) PPI formula
// mm dimensions & pixel dimensions => ppi
// Only needs one measurement (l || w), assumes even pixel distribution
const getPPI = (length, pixels) => Math.round(pixels / convert.mmToIn(length));

//2) Pixels formula
// mm dimensions & ppi => pixel dimensions
const getPixels = (length, ppi) => Math.round(ppi * convert.mmToIn(length));
const getPixDimensions = (lengths, ppi) => lengths.map(mm => getPixels(mm, ppi))

//3) Size (mm) formula
// pixel dimensions & ppi => mm dimensions
const getLength = (pixels, ppi) => Math.round(convert.inToMM(pixels / ppi));
const getMMDimensions = (pixels, ppi) => pixels.map(pix => getLength(pix, ppi))


//////////////////////////////
// DOM EVENTS
//////////////////////////////

// Clearing + Updating fields

// Update preset
const updatePreset = () => {
	let presetVal = Number(presetSelector.value)
	clearAlerts()

	// if changed to 0, clear fields and return
	if (!presetVal) return clearFields();

	// Update only relevant fields
	let heights = document.querySelectorAll(".mm-h-input")
	heights.forEach(elem => elem.value = presets[presetVal].h)

	let widths = document.querySelectorAll(".mm-w-input")
	widths.forEach(elem => elem.value = presets[presetVal].w)
};

// Clear fields
clearFields = () => {
	let fields = document.querySelectorAll("input");
	fields.forEach(field => field.value = "")
}
clearAlerts = () => {
	let alerts = document.querySelectorAll(".alert")
	for (let i =0; i<alerts.length; i++) {
		alerts[i].textContent = defaultMessages[i]
	}
}
clearAll = () => {
	clearFields();
	clearAlerts();
	presetSelector.value = 0;
}

// Calculating answers

// PPI result object
const gatherPPI = () => ({
	arg1: Number(document.getElementById("ppi-mm").value),
	arg2: Number(document.getElementById("ppi-pixels").value),
	alert: document.querySelector(".alert-danger"),
	solve: function () {
		const answer = getPPI(this.arg1, this.arg2)
		this.alert.textContent = `${answer} pixels / inch`
	}
});

// PIXELS result object
const gatherPixels = () => ({
	arg1: [Number(document.getElementById("pixels-height").value), Number(document.getElementById("pixels-width").value)],
	arg2: Number(document.getElementById("pixels-ppi").value),
	alert: document.querySelector(".alert-success"),
	solve: function () {
		const answer = getPixDimensions(this.arg1, this.arg2)
		this.alert.textContent = `${answer[0]} x ${answer[1]} pixels`
	}
});

// SIZE result object
const gatherSize = () => ({
	arg1: [Number(document.getElementById("size-height").value), Number(document.getElementById("size-width").value)],
	arg2: Number(document.getElementById("size-ppi").value),
	alert: document.querySelector(".alert-primary"),
	solve: function () {
		const answer = getMMDimensions(this.arg1, this.arg2)
		this.alert.textContent = `${answer[0]} x ${answer[1]} mm`
	}
});

// General Calculating Event Handler
const calculate = (event) => {
	// input checker function
	const check = arg => typeof(arg) === "number" ? !!arg : arg.every(item => !!item);
	let response;
	const targetId = event.target.id;

	// the target card determines the calculating function
	if (targetId.startsWith("ppi")) {
		response = gatherPPI();
	} else if (targetId.startsWith('pixels')) {
		response = gatherPixels();
	} else if (targetId.startsWith("size")) {
		response = gatherSize();
	} else return "Invalid target, returning..."

		// handle invalid
		if (!(check(response.arg1) && check(response.arg2))) {
			response.alert.textContent = "Invalid input";
			return
		};

		response.solve();
};



//////////////////////////////
// ASSIGNING LISTENERS
//////////////////////////////

// Assign preset onchange
const presetSelector = document.getElementById("preset-select");
presetSelector.addEventListener("change", updatePreset)

// Assign clear fields button
const clearFieldsBtn = document.getElementById("clear-preset")
clearFieldsBtn.addEventListener("click", clearAll)

// Assign onclick to buttons
const calcButtons = document.querySelectorAll("[data-info='calc']");
(function () {
	calcButtons.forEach(btn => btn.addEventListener("click", calculate))
})();

// Assign oninput to inputs
const inputListeners = document.querySelectorAll("input");
(function () {
	inputListeners.forEach(input => input.addEventListener("input", calculate))
})();


What is the PPI Calculator

PPI measurement pixel or the resolution of any computer awning or any television
an awning or you can admeasurement any added awning or accessories?

PPI Calculation shows how abounding pixels are in a 1-inch curve
or any one cm line, at the end it gives all result

How to use the PPI calculator script

This PPI calculator pixels per inch calculator finds the resolution
of your affectation accurate its ambit and accordingly the pixel count.

During this text, we’ll advise you on what is PPI, and analyze the differences
between PPI and DPI through the DPI definition.

Also, you can see some comments on the rankbp analog and its abatement in usage.

Of course, this may be a calculator so we’ll appearance you of the calculations.
To account for PPI and regarding the given values to assort resolution accurate PPI.

Scroll to Top