Показать сообщение отдельно
  #10 (permalink)  
Старый 22.05.2019, 14:05
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,153

А зачем вам такие длинные ссылки? Зачем готовый файл превращать в строку и опять загружать?
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<input type="file" id="imageLoader">
	<canvas id="imageCanvas"></canvas>
	<script>
		var imageLoader = document.getElementById("imageLoader");
		imageLoader.addEventListener("change", handleImage, false);
		var canvas = document.getElementById("imageCanvas");
		var ctx = canvas.getContext("2d");
		var width = 0;
		var arrImg = [];

		function handleImage(e) {
			var file = e.target.files[0];
			var img = new Image();
			img.src = URL.createObjectURL(file);
			URL.revokeObjectURL(file);
			img.onload = function() {
				width += img.width;
				canvas.width = width;
				canvas.height = Math.max(canvas.height, img.height);
				arrImg.push(img);
				arrImg.reduce(function(dx, img) {
					ctx.drawImage(img, dx, 0);
					dx += img.width;
					return dx;
				}, 0);
			};
		};
	</script>
</body>
</html>
Ответить с цитированием