Болтливый табурет о паззле НЕОБНЫКНОВЕННЫЙ КОНЦЕРТ

Возможно не рационально, имеются и другие способы, но я делал так. Начал с поворота картинки. В блокноте записал вот этот код и сохранил с разрешением .htm , в одну папку с картинкой.
код
Посмотреть работу кода
Открыл файл htm в блокноте и в брузере и эксперементально подогнал угол поворота в функции загрузка рисую.rotate
У меня получилась такая цифра -0.057 Размеры полотна canvas соответствуют размерам картинки, и прописываются width="800" height="1067" только так, если прописывать в style возможны ошибки.
Теперь займёмся вырезанием фрагментов из картинки. Нужна информация о координатах. Добавляем в наш код контейнер для информации с id='коорд' и функцию onmousedown=function(e)
Кликаем мышкой в углы нужного участка и записываем значения координат в глобальные переменные нашего кода. Если работаем без сервера, то загрузку рисунка нужно поменять . так как будем пользоваться ImageData. Это массив содержащий данные всех пикселей рисунка. Без сервера загружать рисунок на полотно canvas необходимо через кнопку type="file" и function handleFileSelect(evt) Я для удобства добавил две кнопки загрузки рисунка, одну для работы без сервера, вторую с сервером. Если у вас установлен локальный сервер, эти кнопки и функции не нужны. У меня код несколько усложнился, пришлось в полотне canvas изменить размеры width="1" height="1", а в функции загрузка добавить определение по рисунку размеров полотна.
код
Посмотреть работу кода
В наш код добавляем кнопку разрезка и соответсвующую функцию. Этой кнопкой последовательно будем запускать функции разрезка, установка фрагментов на место, и получение правильного рисунка. Поэтому добавил в код функцию кнопка. Для удобства поместил в общий контейнер с информацией.
код
Посмотреть работу кода
После разрезки нужно правильно собрать пазл перетаскиванием фрагментов. Добавляется функция перетаскивания а к ней onmouseup=function и весь наш код помещаем в контейнер body, чтобы function тащим(e) работала постоянно в этой функции получаем информацию о id объекта под курсором - под=e.target.id. Правильно сложив заполняем массив в function наместо. Все фрагменты на месте, срисовываем рисунок.
код
Посмотреть работу кода
Получив все необходимые данные приступил к странице HTML. Отдельными файлами написал таблицу стилей CSS и скрипт JS.
Код CSS
Код JS
Код HTML
Посмотреть работу кода



табурет