AJAX запрос чтобы получить ширину загруженного изображения

InstantCMS 2.X
#1 11 сентября 2019 в 13:01
Здравствуйте,
знает кто-либо как должен выглядеть ajax запрос в icms2 что бы получить ширину загруженного изображения?
#2 11 сентября 2019 в 13:14
Размеры изображения в браузере выясняются посредством Javascript.
#3 11 сентября 2019 в 13:20


Размеры изображения в браузере выясняются посредством Javascript.

Fuze
ага, ага ))), тока через некоторое время(пока опять взад не закачает изображение),
и полно некорректностей в разных бравзерах....
т.е. вы хотите сказать что icms2 это не предусмотренно ?,
тогда может скажите какой файл отвечает за загрузку изображений
#4 11 сентября 2019 в 13:26

тока через некоторое время, и полно некорректностей

@fazer
Значит вы делаете некорректно.

т.е. вы хотите сказать что icms2 это не предусмотренно ?

@fazer
Что непредусмотрено? Ваша задача? Вероятно да.

тогда может скажите какой файл отвечает за загрузку изображений

@fazer
Контроллер images.

Вы вопрос сформулируйте понятней. Размеры изображения в браузере получаются ТОЛЬКО средствами Javascript, либо берутся из заранее приготовленных атрибутов тега. Делать запрос к серверу чтобы узнать размер изображения это мягко говоря неправильно.
#5 11 сентября 2019 в 13:39


Контроллер images.

Fuze
а можно просто файл, который можно поправить на предмет обработки вопроса про размер?

Размеры изображения в браузере получаются ТОЛЬКО средствами Javascript

Fuze
ну это мягко говоря тож не правда :)


Вы вопрос сформулируйте понятней

Fuze

  1.  
  2. var s = e.content.replace(/\<img src=\"(.+)\" alt.+\>/i,'$1');
  3. console.log('SRC: '+s);
  4. var img = new Image();
  5. img.src = s;
  6. img.onload = function() {
  7. console.log('img-width: '+img.width);
  8. if (img.width > 450){
  9. e.content = '<a class="ajax-modal modal_image hover_image" href="' + s + '">' + e.content + '</a>';
  10. }
  11. }
  12. }
  13.  
таки вот этот код не работает потому, что размер высчитывается уже после получения полного рисунка,
а условие if (img.width > 450){ — выполняется сразу-же
ставить таймауты тоже както не по нашему :)

подскажите тогда пожалуйста как пофиксить эти пять строк? :)
#6 11 сентября 2019 в 13:56

а условие if (img.width > 450){ — выполняется сразу-же

@fazer
Нет. После загрузки изображения, поскольку onload

  1.  
  2. var s = e.content.replace(/\<img src=\"(.+)\" alt.+\>/i,'$1');
  3. var img = new Image();
  4. img.onload = function() {
  5. if (this.width > 450){
  6. e.content = '<a class="ajax-modal modal_image hover_image" href="' + s + '">' + e.content + '</a>';
  7. }
  8. };
  9. img.src = s;
  10.  
#7 11 сентября 2019 в 14:18


Нет. После загрузки изображения, поскольку onload

Fuze
вот как щаз
  1.  
  2. var w = 777;
  3. var img = new Image();
  4. img.onload = function() {
  5. w = this.width;
  6. console.log('pre-width: ' + w);
  7. if (this.width > 450){
  8. e.content = '<a class="ajax-modal modal_image hover_image" href="' + s + '">' + e.content + '</a>';
  9. }
  10. };
  11. img.src = s;
  12. console.log('past-width: ' + w);
  13.  
вот выхлоп


рисунок не оборачивается в тег <a>
#8 11 сентября 2019 в 14:34

рисунок не оборачивается в тег <a>

@fazer
Значит как-то не так оборачиваете, полый код вы не привели. Но я бы оборачивал элементы через wrap.
#9 11 сентября 2019 в 14:39


Значит как-то не так оборачиваете, полый код вы не привели. Но я бы оборачивал элементы через wrap.

Fuze
полный код это setup:… в tinymce
после переноса img.src = s; в конец "оборачивание" вообще перестало работать,
даже не исполняется img.onload = function() ,
а когда img.src "раньше" стоит всё прекрасно оборачивается
#10 11 сентября 2019 в 14:59
ну да, как я изначально и говорил, "условие" исполняется раньше чем появляется информация о ширине(пока не скачается взад весь рисунок)
коли нет icms ajax функций на эту тему, мошть кто подскажет как сделать "триггер" полной закачки?
#11 11 сентября 2019 в 15:08
@fazer, гадать мы тут можем долго, что вы делаете не так. Вот вам 100% рабочий код. Выборку изображений по классу или иным фильтрам корректируйте сами.

  1.  
  2. $('img').each(function (){
  3.  
  4. var _this = this;
  5. var src = $(this).attr('src');
  6.  
  7. var img = new Image();
  8.  
  9. img.onload = function() {
  10. if (this.width > 450){
  11. $(_this).wrap('<a class="ajax-modal modal_image hover_image" href="' + src + '"></a>');
  12. }
  13. };
  14. img.src = src;
  15.  
  16. });
  17.  


а когда img.src "раньше" стоит всё прекрасно оборачивается

@fazer
Вы неправы.

ну да, как я изначально и говорил, "условие" исполняется раньше чем появляется информация о ширине(пока не скачается взад весь рисунок)
коли нет icms ajax функций на эту тему, мошть кто подскажет как сделать "триггер" полной закачки ?

@fazer
Надеюсь вы сейчас шутите.

----------------
Ответ по сабжу я дал более чем развёрнуто.
#12 11 сентября 2019 в 15:38


Вы неправы.
......
Надеюсь вы сейчас шутите.

Fuze
да не, не шучу, видимо дело в том что tinymce как то по своему обрабатывает событие "BeforeSetContent"
и по дебагу chrome я своими глазами вижу, что значение размера изображения появляется не "в то время".
Ваш код не подойдет по причине того, что tiny не формирует "объекты" и "id" картинок на этапе "BeforeSetContent"

----------------
Ответ по сабжу я дал более чем развёрнуто.

Fuze
зря вы так, у меня не было желания вас оскорбить...
а вот вопросов не уменьшилось

Может всё же кто-нить подскажет в каком файле можно тупо всем входящим в icms картинкам
навешивать тег <a class="ajax-modal в зависимости от размера? ну или альтернативные способы получения размеров(коль ajax-табу)
#13 11 сентября 2019 в 15:45

в каком файле можно тупо всем входящим в icms картинкам
навешивать тег <a class="ajax-modal

@fazer
ну так создайте свой JS с кодом Fuze и подключите там где вам надо.
#14 11 сентября 2019 в 15:59

ну так создайте свой JS с кодом Fuze и подключите там где вам надо.

Killer's dream
надо мне, что бы коробочный tinymce сохраняя весь свой функционал(редактирования картинок)
оборачивал большие рисунки в "модальное окно".
Соответственно я и выдумываю свой скрипт, и он практически работает…
Загвоздка именно в автоматизме от размеров,
код Fuze не вставится потому, что НЕТ там "объекта рисунок" пока он(рисунок) не попал в редактор ..."BeforeSetContent"
Если делать по другим событиям то ломается функционал tinymce…
Я конечно мошть чего та и не понимаю, но бьюсь с этим(tinymce) уже две недели…
и просто "подключите там где вам надо" у меня не катит...,
мошть подскажите куда надо? :)
#15 11 сентября 2019 в 16:19
tinymce работает по событию "BeforeSetContent" — асинхронно,
сделал по другому событию… вроде ожило :)
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.