Adamos

jQuery с AJAX - прекрасный индикатор того, насколько устарела статья ;)
Пока не сдох Ослик и встречались всякие маргинальные мобильные браузеры, обработку запросов к серверу приходилось подпирать костылями на всякий нестандартный случай, и jQuery с этим уверенно справлялся. Сейчас стандарт устоялся, повсеместно соблюдается и актуальность этой подпорки околонулевая.

Обратиться к РНР за расчетными данными, если там какой-то нетривиальный алгоритм, и отрисовать SVG прямо в браузере. Растровые картинки для чертежей очень плохо подходят.

"Вопрошающий оперирует ложной моделью Вселенной" (с) Ответчик.
Довольно обычное для начала изучения РНР по учебникам "для чайников" непонимание его роли.

РНР получает запрос от пользователя, формирует текст страницы и отдает его. Все. Больше никакого интерактива.
Нужно что-то получить после загрузки страницы, или по нажатию на кнопку, или по ссылке без перезагрузки страницы - используйте JS, отправляйте AJAX-запрос другому РНР-скрипту и пристраивайте в браузере его ответ, куда надо.

У вас в постановке задачи значительный изъян: вы хотите научиться администрировать Линукс, но не знаете, как и для чего. А ответ именно в этой стороне.
Админить Линукс-сервер - это в значительной части сеть, сервера и службы. Для изучения этого в принципе нежелательна графическая оболочка, хороший вариант - Debian, поскольку по нему элементарно много материалов, в том числе вопросов-ответов-статей для неофитов.
Админить же линуксовые рабочие станции - это разбираться в разных DE, разборки с дровами и периферией в тех случаях, когда оно не заработало из коробки, настройки программ и проч. Здесь, конечно, нужно что-то популярное вроде Убунты (лучше деривативов, поскольку в оригинальной Убунте пользователя стараются не пускать под капот). Но практическая польза от занятий этим делом в виртуалке довольно сомнительна - проблемы-то возникают на реальном железе, в виртуалке все хорошо... Как минимум - нужно ставить ее себе основной системой без постоянного выпадания в винду.

Перекинуть код объявления и заполнения mas внутрь main.
Передавать mas как аргумент по ссылке в каждую из функций, его использующих.

CSS ничего не знает о содержимом картинки.
А вот на сервере загруженную пользователем картинку можно отдать ImageMagick-у, который умеет trim.

Имхо, главный вопрос к этому ТЗ - на кой хер хранить PDF, который генерируется из картинки и текста, если его можно просто сгенерировать на лету из этой картинки и этого текста? Кейсы использования PDF обычно не подразумевают частого обращения, а вот заваливать генерированным контентом базу - довольно очевидная дурь.