Если честно, пытаться разобрать изображение на кусочки с помощью алгоритмов — слишком дурацкая затея, потому что на написание кода уйдёт очень много времени, особенно на разборку частных случаев, да и стрелочки на картинке не в тему — будут мешать разбору изображения. Я предлагаю компромиссный вариант: напишите модуль на JavaScript по грубой ручной расстановке областей на картинке (например, поверх картинки кладётся canvas, а вы на нём рисуете прямоугольники, которые и будут подъобъектами). После завершения работы:
1) вы будете работать с этой же картинкой, т.е. качественно она не изменяется, не разбивается на несколько и т.п.;
2) вы реализуете map-area области, координаты которых будут базированы на вашей разметке, в т.ч. как моментальный предпросмотр;
3) вы не работате со сложными продуктами (в т.ч. проприетарными), и не бегаете по цепочке типа «фотошоп»-«проводник»-«браузер».
Чтобы вы могли оценить время написания, говорю, что для написния вот такой штуки, у меня ушло 2 дня:
Но её основное предназначение — рисовать разные фигуры, а у вас только прямоугольники (и, возможно, овалы), так что при достаточном навыке за день справитесь.
Конечно, если объём работы огромен, то это не предложение, но для нескольких десятков изображений сойдёт.
