Конструктор футболок: Отображение картинки в canvas

в 3:21, , рубрики: Песочница, метки: ,

Создавая конструктор футболок, я постоянно сталкивался с необходимостью изобретать велосипед. Затем наступило просветление и осознание того, что все, что мне необходимо, уже есть на просторах интернета.

Вот так сложилась рабочая система внедрения удаленных наработок в свой код.

Следующим этапом стало правильное формулирование поисковых запросов. Например: на запрос «загрузка картинок в канвас» постоянно шла выдача стандартного:

var image = new Imade ();

Как объяснить поисковой машине, что мне необходима информация о том, как выбрать файл на клиенте и отобразить его на канвас с автоматическим сохранением на сервере?

В итоге, я пришел к выводу, что данную информацию следует искать по частям. Немало сложных моментов принесло и то, что сам код работы с канвас шел через библиотеку fabric.js.

Очень неплохая библиотека, почти заточенная под мышление «по-русски», то есть образно и открыто. Но, конечно, не без недостатков.

Данная библиотека хороша для интерактива с картинками, но загрузки файлов на канвас ни в одном примере на офф. сайте не реализовано.

Да, совсем забыл сказать, что изучать программирование я начал одновременно с созданием данного приложения.

Ну все таки, шаг за шагом, изучая другие исходники и активно пользуясь поиском, открыл много интересной, полезной информации, обогатил знания и таки нашел пресловутый фрагмент кода!

Далее, предстояло написать новую функцию в контроллере и подключить ее на кнопку выбора файлов. Все бы ничего, да в дело вмешалась библиотека angular.js!

Преодолев в конце концов и это препятствие, могу сказать, что ангуляр, это отличное дополнение для упорядочивания кода приложений.

Применение библиотеки, выражается в употреблении магических добавок, типа:

ng-click=«addLine()»

После получения такой конструкции, идет перенаправление на необходимую функцию в контроллере. Сначала, этот прием кажется немного сложным, но с практикой приходит осознание, что это удобно!

Вот полный исходный код загрузчика удаленной картинки в канвас:

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Пример 1</title>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>  

</head>

<body>
	
<a href="#" id="upload-button" >Загрузить фото !</a>
<input type="file" id="design-upload" style="display: none;" />
 
<canvas id='example'>Обновите браузер</canvas> 

<script>
$('#upload-button').click(function(){
				$('#design-upload').click();
				return false;
			});
			
			//upload image
			var example = document.getElementById("example");
						  var ctx = example.getContext('2d')
			document.getElementById('design-upload').onchange = function (e) {
				if(window.FileReader) {
					var reader = new FileReader();
			    	reader.readAsDataURL(e.target.files[0]); 
			    	reader.onload = function (e) {
					var image = new Image;
			    		image.src = e.target.result;
			    		image.onload = function() {
						 
ctx.drawImage(image, 0, 0);		
						
			    		
			    		};	    		               
					};
				}
				else {
					alert('FileReader API is not supported in your browser, please use Firefox, Safari, Chrome or IE10!')
				}
			};
			
			
</script>

</body>

</html>

Для работы с канвас, как вы наверное знаете, необходим браузер с поддержкой HTML5 и наличие указанных библиотек.

В коде странице обычная кнопка выбора файла, маскируется стилизованной ссылкой, затем в дело вступает обычное создание канвы и инициализация 2d контента.

После этого подключается FileReader API и на событие onload вешаем функцию отрисовки картинки.

В следующем посте напишу о том, как сохранить эту картинку на сервере.

Офф. сайт fabric.js
fabricjs.com/demos/

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js