Resize image
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 - 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](http://shots.codepen.io/happyhj/pen/aBrQLK-512.jpg)
Developer | HeeJae Kim |
Username | happyhj |
Uploaded | October 11, 2022 |
Rating | 3 |
Size | 1,892 Kb |
Views | 24,288 |
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!
Name | Size |
3 dimension plane | 1,836 Kb |
Eg.MovableCoord always stops at the edge that circular value is true. | 2,166 Kb |
Basic Cube | 4,600 Kb |
Comments.json | 1,372 Kb |
A Pen by HeeJae Kim | 1,464 Kb |
Safari skips system dialogs with the popstate event and the hashchange event | 2,309 Kb |
Touch events are not triggering after closing the system dialog | 2,274 Kb |
Gyronorm test | 10,136 Kb |
Vertical Zoom Slide | 4,577 Kb |
Visible Demo | 3,219 Kb |
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!
Name | Username | Size |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Blockquote design | Sjmcpherson | 1,863 Kb |
Matrix | Stathisnikolaidis | 1,922 Kb |
Custom checkbox example | Capelo | 3,495 Kb |
A Pen by Rob Levin | Roblevin | 2,787 Kb |
Social.svg.min | Larsenwork | 13,849 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
Cake | Kennyname | 7,220 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
JavaScript Animation | Rcmeisty | 4,581 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!