Создавая конструктор футболок, я постоянно сталкивался с необходимостью изобретать велосипед. Затем наступило просветление и осознание того, что все, что мне необходимо, уже есть на просторах интернета.
Вот так сложилась рабочая система внедрения удаленных наработок в свой код.
Следующим этапом стало правильное формулирование поисковых запросов. Например: на запрос «загрузка картинок в канвас» постоянно шла выдача стандартного:
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/
