Resize image

Developer
HeeJae Kim
Size
1,892 Kb
Views
24,288
  1. Resize image Previews
  2. Resize image HTML Codes
  3. Resize image JS Codes

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
IQ Test

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
Name
Comments.json
Visible Demo
3 dimension plane
Basic Cube
S2_cafe_viewmore_scroll
Safari skips system dialogs with the popstate event and the hashchange event
Touch events are not triggering after closing the system dialog
A Pen by HeeJae Kim
Vertical Zoom Slide
Persist for jQuery .js
Create amazing sales emails 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!