Resize image

Developer
Size
1,892 Kb
Views
24,288

How do I make an resize image?

What is a resize image? How do you make a resize image? This script and codes were developed by HeeJae Kim on 11 October 2022, Tuesday.

Resize image Previews

Resize image - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Resize image</title>
</head>
<body> <input id="file" type="file"/>
<img id="img"/> <script src="js/index.js"></script>
</body>
</html>

Resize image - Script Codes JS Codes

var getResizedDataURL = function(image, maxSize) {	var OUTPUT_IMG_TYPE = "image/jpeg";	var OUTPUT_IMG_QUALITY = 1.0;	return new Promise(function(resolve, reject) {	if(image.src && image.complete) {	onload();	} else {	image.onload = onload;	}	function onload() {	var canvas = document.createElement('canvas');	var aspectRatio = image.width / image.height;	var width = aspectRatio > 1 ? maxSize : maxSize * aspectRatio;	var height = aspectRatio > 1 ? maxSize / aspectRatio : maxSize;	//set dimensions	canvas.width = width;	canvas.height = height;	var context = canvas.getContext('2d');	context.drawImage(	image,	0, 0, image.width, image.height, // src start point and size	0, 0, canvas.width, canvas.height // target start point and size	);	var dataURL = canvas.toDataURL(OUTPUT_IMG_TYPE , OUTPUT_IMG_QUALITY);	resolve(dataURL);	};	}); };
var elFile = document.getElementById("file");
var elImg = document.getElementById("img");
elFile.addEventListener("change", function(){ var file = elFile.files[0]; var reader = new FileReader(); reader.addEventListener("load", function () { elImg.src = reader.result;
// getResizedDataURL(elFile.files[0], 1536); }, false); if (file) { reader.readAsDataURL(file); }
});
Resize image - Script Codes
Resize image - Script Codes
Home Page Home
Developer HeeJae Kim
Username happyhj
Uploaded October 11, 2022
Rating 3
Size 1,892 Kb
Views 24,288
Do you need developer help for Resize image?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

HeeJae Kim (happyhj) Script Codes
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!