Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Сбросить ползунки на "0" в примере CAMANJS (https://javascript.ru/forum/dom-window/81224-sbrosit-polzunki-na-0-v-primere-camanjs.html)

denismix 23.10.2020 15:58

Сбросить ползунки на "0" в примере CAMANJS
 
Прошу помощи!

Нужно подключить обработчик изображений CAMANJS на страницу сайта.
CAMANJS работает на стороне клиента - просто загружается js на страницу.

Решил использовать его базовый пример - меня в нем все более чем устраивает...

На этой же странице есть информация, которую нельзя разрушать презагрузкой - пользователь предварительно выбирает фрагмент Cropper.js и только потом этот фрагмент попадает на обработку CAMANJS. Разделить на разные страницы нельзя.

Нужно лезть в код библиотеки CAMANJS, но опыта не хватает.

Уже неделю мучаюсь с двумя проблемами:

1. Не могу загрузить другое изображение для обработки без перезагрузки страницы. По кнопке [Выбрать файл]

В смысле, кнопку то я сделал, но вот заставить CAMANJS "забрать" для обработки новую картинку без перезагрузки страницы, получается только ужасным костылем:
  • стираю <canvas id="example" ....>
  • создаю <img id="example_del" ....> с нужной мне картинкой
    :blink: удаляю из DOM запись <link href='/css/caman.css' ...> :nono:
  • меняю id у <img id="example_del" ....> на "example"
  • снова вставляю в DOM запись <link href='/css/caman.css' ...>
... короче, мне и самому стыдно, если что.

CAMAN новую картинку "забирает", но его начинает существенно подглючивать - криво сбрасываются значения ползунков... все работает и даже картинка правильно отображается, но при нескольких таких сбрасываниях, что то ломается с его буферизацией обработки последовательности ползунков и он их сначала гонят туда-сюда как умолишенный, и даже в итоге выдает правильный результат... но ооочень не быстро

2. Вторая проблема - корректно сбросить ползунки на "0".
:dance: UPD Эта проблема решена - внес в песочницу.

// Обход и сброс всех Ползунков
$('.FilterSetting input').each(function() {
  $(this).val(0);
  $(this).change();
});

// Обход и сброс всех Кнопок
$("#PresetFilters a").removeClass('Active');

// Нажатие на Кнопку с активным статусом
$('.Active').each(function() {
  $(this).click();
});


Пришла мысль засовывать его в <iframe> формировать PHP нужную страницу и просто ее перезагружать, но Adblokers убьют всю идею.

ОЧЕНЬ прошу помощи!
Хороший проект застрял, т.к. я понадеялся быстренько расковырять код примера, да не тут то было :(

Заранее спасибо за любую помощь и дельный совет!


Ссылка на песочницу
(!) Но на ней некорректно работает сам js Caman - возможно я что то неправильно настроил...

Ccылка на точно такой же как в песочнице каталог на моем IIS MS Server 2016
На сервере из плюшек только голый PHP 7, который в коде этого примера никак не участвует...

ССЫЛКА на "вычищенный" пример на Гитхабе.
Тот пример, что на официальной странице CAMANJS использует умолишенские названия переменных в JS.

Nexus 23.10.2020 16:13

Если действительно хотите решить задачу - создайте макет, который будет отражать вашу проблему.
Github это, конечно прекрасно, но...

Песочницы под js.

denismix 23.10.2020 22:11

Цитата:

Сообщение от Nexus (Сообщение 530059)
Если действительно хотите решить задачу - создайте макет, который будет отражать вашу проблему.
Github это, конечно прекрасно, но...

Песочницы под js.

Попробовал сделать в нескольких "песочницах" - Cropper работает, даже позволяет файлы с компа в себя "засовывать",
а Caman корректно не запускается, хоть ты что...
Я в песочницах с подобными проектами никогда не работал, может неправильно настроил? :-?

Ссылка на песочницу

Ccылка на точно такой же как в песочнице каталог на моем IIS MS Server 2016
На сервере из плюшек только голый PHP 7, который в коде этого примера никак не участвует...


Часовой пояс GMT +3, время: 08:29.