Полезная информация

В мире Mozilla происходит много интересных событий. Но вам не нужно постоянно посещать новостные сайты, чтобы быть в курсе всех изменений. Зайдите на ленту новостей Mozilla Россия.
  • Форумы
  •  » Сustom Buttons
  •  » [CB]Увеличивать размеры изображений из контекстного меню на странице

№2629-12-2013 04:16:05

difabor
Участник
 
Группа: Members
Зарегистрирован: 21-09-2013
Сообщений: 539
UA: Firefox 26.0
Веб-сайт

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

bunda1 пишет
difabor пишет

Дело в том, что увеличение высоты и ширины на одну и ту же величину нарушает пропорции неквадратных картинок.
Я просто увеличил высоту пропорционально отношению высота/ширина.

А пример :(

Добавлено 29-12-2013 03:21:37
Вот я увеличил не квадратную картинку и вроде нормальные пропорции:
http://img839.imageshack.us/img839/4760/fe7t.jpg

Вот оригинал:
55964c94.png
Вот как она увеличилась (до исправления кода):
cbc79236.png
Вот как она увеличилась (после исправления кода):
8cac2408.png
Обратите внимание - размер по ширине у обоих увеличенных вариантов - тот же.
Чем сильнее картинка отличается от квадратной, тем сильнее разница.
Широкая картинка будет вытягиваться в высоту, а высокая - в ширину.
Впрочем, я могу доказать это математически, если хотите.


Хорошо, когда у человека есть выбор, но плохо, когда он перед ним стоит ©

Отсутствует

 

№2729-12-2013 04:31:59

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

villa7 пишет

bunda1
А с этим кодом никак не подружить новый код, на старом работало.

Выделить код

Код:

/*Спрятать подсказки*/

(function() {
    function onPS(e) {
        if ( e.target.lastChild && e.target.lastChild.nodeName == "image") return;
        if ( e.originalTarget.nodeName != "tooltip" || window.__attributesInspector) return;
        var node = e.originalTarget.ownerDocument.tooltipNode;
        for (; node && !(node instanceof HTMLAnchorElement); node = node.parentNode);
        !node && e.preventDefault();
    }
    const observer = {
        observe: function(win) win.addEventListener("load", this, false),
        handleEvent: function(e) {
            var doc = e.target;
            var win = doc.defaultView;
            win.removeEventListener("load", this, false);
            if (doc.location.href == "chrome://browser/content/browser.xul" || win.cbttp) return;
            win.cbttp = true;
            win.addEventListener("popupshowing", onPS, true);
            win.addEventListener("unload", function onUL() {
                win.removeEventListener("unload", onUL, false);
                win.removeEventListener("popupshowing", onPS, true);
            }, false)
        }
    }
    addEventListener("popupshowing", onPS, true);
    Services.obs.addObserver(observer, "domwindowopened", false);
    addDestructor(function() Services.obs.removeObserver(observer, "domwindowopened"));
})();


return;function winObs(aSubject, aTopic) {
   var windows = Cc["@mozilla.org/embedcomp/window-watcher;1"].getService(Ci.nsIWindowWatcher).getWindowEnumerator();
   while( windows.hasMoreElements() ) {
          var win = windows.getNext();    
          LOG( win.name )    
           }
};
Services.ww.registerNotification(winObs);
addDestructor(function() { Services.ww.unregisterNotification(winObs) });

Добавлено 29-12-2013 04:53:24

difabor пишет

Обратите внимание - размер по ширине у обоих увеличенных вариантов - тот же.
Чем сильнее картинка отличается от квадратной, тем сильнее разница.
Широкая картинка будет вытягиваться в высоту, а высокая - в ширину.
Впрочем, я могу доказать это математически, если хотите.

Не квадратные тоже бывают всякие я думал ты подразумеваешь картинки без прямых углов. Насчёт пропорций не понятно, увеличивая вытянутый прямоугольник пропорции должны сохранятся и при чём тут var ratio = img.naturalHeight/img.naturalWidth;

Отредактировано bunda1 (29-12-2013 04:53:24)

Отсутствует

 

№2829-12-2013 05:04:20

difabor
Участник
 
Группа: Members
Зарегистрирован: 21-09-2013
Сообщений: 539
UA: Firefox 26.0
Веб-сайт

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

Допустим, исходная картинка имеет размеры 300х100, т.е. отношение ширины к высоте - 3:1
Если Вы увеличите и ширину и высоту на 170 рх, то станет 470:270, т.е. отношение будет ~1.74:1, т.е почти вдвое исказится!
Чтобы сохранить пропорции надо высоту увеличивать не на 170, а на 170/3, т.е. на ~57px.
Именно это я и сделал - я помножил 170 на ratio=H/W, т.е. на 1/3.
Если бы пропорции были бы другими (например, 400:300, то и ratio=H/W было бы 3/4 и 170 умножалось бы на 3/4, т.е. было бы ~127

Отредактировано difabor (29-12-2013 05:07:52)


Хорошо, когда у человека есть выбор, но плохо, когда он перед ним стоит ©

Отсутствует

 

№2929-12-2013 05:04:37

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

А может ты и прав:

Выделить код

Код:

alert(3/12); // картинка = 0.25
alert( (3+4)/(12+4) ); // увеличенная картинка = 0.4375

var ratio = 3/12;
alert( (3+4*ratio)/(12+4) ); // увеличенная картинка( by difabor) = 0.25

Отредактировано bunda1 (29-12-2013 05:08:14)

Отсутствует

 

№3029-12-2013 06:22:14

villa7
Участник
 
Группа: Members
Зарегистрирован: 21-07-2012
Сообщений: 2235
UA: Firefox 26.0

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

bunda1
Спасибо, теперь работает. Как бы ещё направление колеса мышки поменять, привык на себя увеличивать, а от себя уменьшать.


Лучше спросить у знающих - чем лезть не зная.

Отсутствует

 

№3129-12-2013 06:27:17

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

villa7

Выделить код

Код:

var zoom = e.detail < 0 ? ScrollZoom : -ScrollZoom;

на

Выделить код

Код:

var zoom = e.detail > 0 ? ScrollZoom : -ScrollZoom;

Отредактировано bunda1 (29-12-2013 06:27:39)

Отсутствует

 

№3229-12-2013 07:11:51

villa7
Участник
 
Группа: Members
Зарегистрирован: 21-07-2012
Сообщений: 2235
UA: Firefox 26.0

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

bunda1
Спасибо, хорошая, а главное нужная кнопка получилась, до этого действительно не хватало ручного зума.


Лучше спросить у знающих - чем лезть не зная.

Отсутствует

 

№3329-12-2013 12:54:19

voqabuhe
Участник
 
Группа: Members
Зарегистрирован: 06-12-2011
Сообщений: 3231
UA: Firefox 29.0

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

bunda1
Что-то у меня пропорции всё равно искажаются.

Отредактировано voqabuhe (29-12-2013 12:57:10)

Отсутствует

 

№3429-12-2013 17:47:31

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

voqabuhe пишет

bunda1
Что-то у меня пропорции всё равно искажаются.

Может с изображениями у которых вышина > ширина :/

Добавлено 29-12-2013 18:13:13
И нужен пример.

Отредактировано bunda1 (29-12-2013 18:13:13)

Отсутствует

 

№3529-12-2013 18:48:02

voqabuhe
Участник
 
Группа: Members
Зарегистрирован: 06-12-2011
Сообщений: 3231
UA: Firefox 29.0

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

bunda1 пишет

Может с изображениями у которых вышина > ширина :/

Добавлено Сегодня 18:13:13
И нужен пример.

Да вот хотябы с картинкой из из поста difabor №26

Отсутствует

 

№3629-12-2013 19:19:45

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

У меня с картинкой из поста difabor нормально всё. Я же на ней код и обкатывал.
А ты используешь последнюю версию 01-12-2013 17:46:04

Отсутствует

 

№3729-12-2013 19:39:32

voqabuhe
Участник
 
Группа: Members
Зарегистрирован: 06-12-2011
Сообщений: 3231
UA: Firefox 29.0

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

bunda1 пишет

А ты используешь последнюю версию 01-12-2013 17:46:04

Ну да, конечно.

Отсутствует

 

№3829-12-2013 19:43:08

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

Надо будет проверить на FF29.

Отсутствует

 

№3929-12-2013 19:45:01

difabor
Участник
 
Группа: Members
Зарегистрирован: 21-09-2013
Сообщений: 539
UA: Firefox 26.0
Веб-сайт

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

voqabuhe пишет
bunda1 пишет

Может с изображениями у которых вышина > ширина :/

Добавлено Сегодня 18:13:13
И нужен пример.

Да вот хотябы с картинкой из из поста difabor №26

Не могли бы Вы привести скан того, что у Вас получается?
У меня пропорции соблюдаются до тех пор, пока картинка не досигнет ширины экрана. А потом она будет увеличиваться только по вертикали. Но это итак ожидаемо - увеличить размер экрана кнопка не может :)


Хорошо, когда у человека есть выбор, но плохо, когда он перед ним стоит ©

Отсутствует

 

№4029-12-2013 19:56:56

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

difabor пишет

Не могли бы Вы привести скан того, что у Вас получается?
У меня пропорции соблюдаются до тех пор, пока картинка не досигнет ширины экрана. А потом она будет увеличиваться только по вертикали. Но это итак ожидаемо - увеличить размер экрана кнопка не может :)

У меня так же если картинка достигла ширину экрана. Так что скан не нужен.
А вот с изображениями у которых вышина > ширина другая ситуация они уходят за экран если достигли высоту экрана.

Отсутствует

 

№4129-12-2013 20:31:02

voqabuhe
Участник
 
Группа: Members
Зарегистрирован: 06-12-2011
Сообщений: 3231
UA: Firefox 29.0

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

difabor пишет

Не могли бы Вы привести скан того, что у Вас получается?

w0oxczO.jpg
И так далее, т.е. ширина вообще не увеличивается.

Отсутствует

 

№4229-12-2013 20:39:05

difabor
Участник
 
Группа: Members
Зарегистрирован: 21-09-2013
Сообщений: 539
UA: Firefox 26.0
Веб-сайт

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

voqabuhe пишет
difabor пишет

Не могли бы Вы привести скан того, что у Вас получается?

http://i.imgur.com/w0oxczO.jpg
И так далее, т.е. ширина вообще не увеличивается.

А Вы уверены, что прошлую версию Вы удалили/закомментировали?
По скрину видно, что картинка у Вас получается квадратная. Проверьте, или не осталось у вас не удалённых кусков старой версии.


Хорошо, когда у человека есть выбор, но плохо, когда он перед ним стоит ©

Отсутствует

 

№4329-12-2013 20:53:36

voqabuhe
Участник
 
Группа: Members
Зарегистрирован: 06-12-2011
Сообщений: 3231
UA: Firefox 29.0

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

difabor пишет

А Вы уверены, что прошлую версию Вы удалили/закомментировали?
По скрину видно, что картинка у Вас получается квадратная. Проверьте, или не осталось у вас не удалённых кусков старой версии.

Уверен на 200%.  Она получается не квадратная, это я её так тормознул, чтобы оставить видимым ваш рисунок, а так её можно ещё вытягивать хоть сколько.  Это у меня на [nightly] так, проверьте сами, что у вас получится.

Отсутствует

 

№4429-12-2013 22:00:12

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

voqabuhe
А у меня на [nightly] ширина увеличивается:
uw9t.jpg

Отсутствует

 

№4530-12-2013 01:31:07

difabor
Участник
 
Группа: Members
Зарегистрирован: 21-09-2013
Сообщений: 539
UA: Firefox 26.0
Веб-сайт

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

voqabuhe пишет
difabor пишет

А Вы уверены, что прошлую версию Вы удалили/закомментировали?
По скрину видно, что картинка у Вас получается квадратная. Проверьте, или не осталось у вас не удалённых кусков старой версии.

Уверен на 200%.  Она получается не квадратная, это я её так тормознул, чтобы оставить видимым ваш рисунок, а так её можно ещё вытягивать хоть сколько.  Это у меня на [nightly] так, проверьте сами, что у вас получится.

Я ещё не умею строить новый профиль, увы...:blush:


Хорошо, когда у человека есть выбор, но плохо, когда он перед ним стоит ©

Отсутствует

 

№4630-12-2013 01:36:56

voqabuhe
Участник
 
Группа: Members
Зарегистрирован: 06-12-2011
Сообщений: 3231
UA: Firefox 29.0

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

difabor пишет

Я ещё не умею строить новый профиль, увы...:blush:

Как создать новый профиль? | Форум Mozilla Россия

Отсутствует

 

№4730-12-2013 01:51:49

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

voqabuhe
Попробуй:

Выделить код

Код:

// Увеличивать размеры изображений из контекстного меню на странице, от 30.12.2013. ................................
(function () {
   var imgZoom = 170;   // на сколько увеличить изображение из меню
   var scrollZoom = 8;  // на сколько увеличивать/уменьшать колесиком мыши
   var scrollTop = 1;   // или -1, переключение направление прокрутки для увеличение колёсиком
   
   // добавить новый пункт в меню изображений
   var contextMenu = document.getElementById("contentAreaContextMenu");
   var menuitem = contextMenu.appendChild(document.createElement("menuitem")); // как последний пункт меню
   menuitem.setAttribute("label", "Увеличить размер");
   addDestructor(function() contextMenu.removeChild(menuitem));
   addEventListener("popupshowing", function() menuitem.hidden = !gContextMenu.onImage, false, contextMenu);

   // если клик или команда на пункте меню
   menuitem.setAttribute("oncommand", "this.run();");
   menuitem.run = function() {
      var img = gContextMenu.target; // получить изображение   

      // конвертировать изображение в base64 ....
      var canvas = document.createElementNS(xhtmlns, 'canvas');
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      var base64 = canvas.toDataURL();

      // создать и открыть всплывающую подсказку с увеличенным изображением над изображением .... 
      var tooltip = gBrowser.appendChild( document.createElement("tooltip") );
      tooltip.setAttribute("onpopuphiding", "event.preventDefault();");
      tooltip.style.cssText = "margin-left: -3px; margin-top: -3px; -moz-appearance: none !important; border: none; background: transparent; max-width: none";
      var image = tooltip.appendChild( document.createElement("image") );
      var h = img.height, w = img.width;
      image.style.width = w + imgZoom + "px"; image.style.height = h * (1 + imgZoom / w);
      image.setAttribute("src", base64 );
      tooltip.showPopup(img, -1, -1, "popup", "topleft", "none"); // открыть      
   
      // прокрутка на подсказке меняет размеры изображения, на странице закрывает его .... 
      function imageZoom(e) {
         if ( e && e.target != image ) { removeTooltip(); return; }
         var zoom = (e.detail < 0 ? scrollZoom : -scrollZoom) * scrollTop; 
         var h = image.clientHeight, w = image.clientWidth;
         image.style.width = w + zoom + "px";
         image.style.height = h * (1 + zoom / w) + "px";
      }
      gBrowser.addEventListener('DOMMouseScroll', imageZoom, true);
      
      // удалить подсказку и обработчики ....
      function removeTooltip() {
         try { gBrowser.removeChild( tooltip ) } catch(e) {};
         gBrowser.removeEventListener("click", removeTooltip, true);
         gBrowser.removeEventListener("DOMMouseScroll", imageZoom, true);
      } 
      gBrowser.addEventListener("click", removeTooltip, true);  // удалить по клику на странице         
   }   
})();

Добавлено 30-12-2013 01:55:00

difabor пишет

Я ещё не умею строить новый профиль, увы...:blush:

И не надо создавать, вот Mozilla Firefox, Portable Edition Beta, Aurora, and Nightly | PortableApps.com - Portable software for USB, portable and cloud drives

Отредактировано bunda1 (30-12-2013 02:12:04)

Отсутствует

 

№4830-12-2013 02:42:48

voqabuhe
Участник
 
Группа: Members
Зарегистрирован: 06-12-2011
Сообщений: 3231
UA: Firefox 29.0

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

bunda1
Да теперь намного лучше. Вот только знаешь что заметил, когда при увеличение картинки достигают низа страницы, то ширина перестаёт увеличиваться, т.е она начинают вытягиваться.

Отредактировано voqabuhe (30-12-2013 02:43:27)

Отсутствует

 

№4930-12-2013 02:53:45

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

voqabuhe пишет

bunda1
Да теперь намного лучше. Вот только знаешь что заметил, когда при увеличение картинки достигают низа страницы, то ширина перестаёт увеличиваться, т.е она начинают вытягиваться.

Да есть такое на [nightly]

Отредактировано bunda1 (30-12-2013 02:58:47)

Отсутствует

 

№5030-12-2013 03:00:18

voqabuhe
Участник
 
Группа: Members
Зарегистрирован: 06-12-2011
Сообщений: 3231
UA: Firefox 29.0

Re: [CB]Увеличивать размеры изображений из контекстного меню на странице

bunda1 пишет

Оно того не стоит :/

В общем согласен. Тогда другой вопрос. :) А нельзя сделать, чтобы картинка увеличивалась от центра равномерно во все стороны, а не только вниз и вправо?

Добавлено 30-12-2013 03:04:38
bunda1
Смотрю "Оно того не стоит" удалил. Появилась другое мнение? :)

Отредактировано voqabuhe (30-12-2013 03:04:38)

Отсутствует

 
  • Форумы
  •  » Сustom Buttons
  •  » [CB]Увеличивать размеры изображений из контекстного меню на странице

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]