JSFiddle - React, Tailwind, and code Playground

by Nata_Hamster

HTML

<input class="load_ph_step" type="file"/> <canvas></canvas> 
<br><br>
<button>New el</button>

<div id="new-pic"></div>

JavaScript

$('button').click(function(){
	$('#new-pic').html(`<p>virt</p><input class="load_ph_step" type="file"/> <canvas></canvas>`);
});

img_load_step = document.querySelector('.load_ph_step');
	img_load_step.addEventListener("change", handleImage);

function handleImage(e) {
		var reader = new FileReader();
		var _this = this;
		var loadImage = _this.parentElement;
		var canvas = loadImage.querySelector('canvas');
	    var ctx = canvas.getContext("2d");
		reader.onload = function(event) {
			var img = new Image();
			img.onload = function() {
				let width_pic = 200;
				let k = img.width/width_pic;
				canvas.height = img.height / k;
				ctx.drawImage(img, 0, 0,   // срезает слева и сверху,
					img.width, img.height, 
					0, 0,    
					width_pic, canvas.height); 
			};
			img.src = event.target.result
		};
		reader.readAsDataURL(e.target.files[0]);
	}