TypeScript

HTML

<div id="app">
  <h1>
	Resizing image with JavaScript / TypeScript by using Canvas
	</h1>
<strong>Demonstration of the diffrent methods and process with easy to understand code</strong>
<br/>

<h4>
Resizing image have two main steps:
</h4>
<ul style="text-align: left;">
<li>
Resizing exist image
</li>
<li>
Producing new image 	
</li>
</ul>

<p align="left">
This guide is dealing mainly the first step, the second step, is the same for all the methods:<br/>
<ul style="text-align: left;">
<li>
You have a canvas with the dimensions of the target image	
</li>
<li>
you draw the image on it in the exact size of the canvas
</li>
<li>
use a method to output base64 image.
<br/>
<code>let resizedBase64image = outputCanvas.toDataURL('image/jpeg', 0.85);</code>
</li>
</ul>
<br/>
</p>
<h2>
Original Image
</h2>
<a href="https://2012in2012.info/wp-content/uploads/2018/03/free-nature-landscape-images-12-n.jpg">
<img src="https://2012in2012.info/wp-content/uploads/2018/03/free-nature-landscape-images-12-n.jpg" width="100px" height="100px">
</a>
<a href="https://2012in2012.info/wp-content/uploads/2018/03/free-nature-landscape-images-12-n.jpg">
<br/>
https://2012in2012.info/wp-content/uploads/2018/03/free-nature-landscape-images-12-n.jpg
</a>

<h2>
Method 1 - Step by step resize, diffrent canvas for each resize step
</h2>
Canvas 1 - Original full image 12M pixel
<br/>
 <canvas id="canvas1" width="1024px" height="1024px">
 </canvas>
<br/>

Canvas 2 - 1st 50% resize, total resize 0.5
<br/>
 <canvas id="canvas2" width="1024px" height="1024px">
 </canvas>
<br/><br/>

Canvas3 - 2nd 50% resize, total resize 0.25
<br/>
 <canvas id="canvas3" width="1024px" height="1024px">
 </canvas>
<br/><br/>

Canvas4 - 3rd 50% resize, total resize 0.125
<br/>
 <canvas id="canvas4" width="1024px" height="1024px">
 </canvas>
 
<br/>
<h2>
Method 2 - Direct resize from original to target, using single canvas, and one resizing step</h2>
<p align="left">
This method will result in aliased image
in case the...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}

JavaScript 1.7

var sourceImage = "https://2012in2012.info/wp-content/uploads/2018/03/free-nature-landscape-images-12-n.jpg";

function stepByStepResize() {
     img = new Image();
    img.src = sourceImage;
    
    img.onload = () => {
    
		var originalCanvas = document.getElementById("canvas1");
		var originalCanvasContext = originalCanvas.getContext("2d");

		originalCanvas.width = img.width;
		originalCanvas.height = originalCanvas.width * (img.height / img.width);
		
		//	Set original canvas size
		originalCanvasContext.drawImage(img, 0, 0, originalCanvas.width, 				originalCanvas.height);
		
			var canvas2 = document.getElementById("canvas2");
			var canvas2context = canvas2.getContext("2d");

			canvas2.width = Math.floor(originalCanvas.width / 2);
			canvas2.height = Math.floor(originalCanvas.width / 2);

			//	Set original canvas size
			canvas2context.drawImage(originalCanvas, 0, 0, originalCanvas.width, originalCanvas.height, 0, 0, canvas2.width, canvas2.height);
			
			var canvas3 = document.getElementById("canvas3");
			var canvas3context = canvas3.getContext("2d");

			canvas3.width = Math.floor(canvas2.width / 2);
			canvas3.height = Math.floor(canvas2.width / 2);

			//	Set original canvas size
						canvas3context.drawImage(canvas2, 0, 0, canvas2.width, canvas2.height, 0, 0, canvas3.width, canvas3.height);

			
			var canvas4 = document.getElementById("canvas4");
			var canvas4context = canvas4.getContext("2d");

			canvas4.width = Math.floor(canvas3.width / 2);
			canvas4.height = Math.floor(canvas3.width / 2);

			//	Set original canvas size
									canvas4context.drawImage(canvas3, 0, 0, canvas3.width,   canvas3.height, 0, 0, canvas4.width, canvas4.height);				
									
  		// Now use target canvas, to hold the final image, and output image from it

    } // End of the img.onLoad
}

function directResize() {
img = new Image();
    img.src = sourceImage;
    
    img.onload = () => {
			var directCanvas = document.getElementById("direct");
			var...