Смотрю "Оно того не стоит" удалил. Появилась другое мнение?
А нельзя сделать, чтобы картинка увеличивалась от центра равномерно во все стороны, а не только вниз и вправо?
Сделать можно постоянно перемещая при увеличении изображение относительно его старого центра. Тут нужен алгоритм такого перемещения и не понятно как получить координаты для такого перемещения.
Надо подумать.
Отредактировано bunda1 (30-12-2013 03:19:47)
Отсутствует
bunda1
Кстати увеличение колесом довольно хорошо реализовано в скрипте picViewer for Greasemonkey. Посмотри, может что-то почерпнёшь полезное.
Отредактировано voqabuhe (30-12-2013 14:15:41)
Отсутствует
voqabuhe
Скрипт интересный,но на китайском?/японском?Хоть бы английский был.Потому мне больше по-душе Imagus с фильтрами от Rodny или тот же Mouseover Popup Image Viewer,для которого тоже фильтров хватает,даже здесь на форуме
Отсутствует
А нельзя сделать, чтобы картинка увеличивалась от центра равномерно во все стороны, а не только вниз и вправо?
Вот попробуй с исправлениями от Dumby
(function () { var imgZoom = 170; // на сколько увеличить изображение из меню var scrollZoom = 20; // на сколько увеличивать/уменьшать колесиком мыши var scrollTop = 1; // или -1, переключение направление прокрутки для увеличение колёсиком // добавить новый пункт в меню изображений var contextMenu = document.getElementById("contentAreaContextMenu"); var menuitem = contextMenu.appendChild(document.createElement("menuitem")); // как последний пункт меню menuitem.setAttribute("label", "Увеличить размер ( test )"); addDestructor(function() contextMenu.removeChild(menuitem)); addEventListener("popupshowing", function() menuitem.hidden = !gContextMenu.onImage, false, contextMenu); var ar = Cc['@mozilla.org/accessibleRetrieval;1'].getService(Ci.nsIAccessibleRetrieval); ar.getAccessibleFor(gBrowser); // ... ... // если клик или команда на пункте меню 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")), tts = tooltip.style; tooltip.setAttribute("onpopuphiding", "event.preventDefault();"); tts.cssText = "margin: 0; padding: 0; -moz-appearance: none !important; border: none; background: transparent; max-width: none"; var image = tooltip.appendChild(document.createElement("image")); var acc = ar.getAccessibleFor(img); acc.QueryInterface(Ci.nsIAccessibleImage); var [ax, ay, aw, ah] = [{}, {}, {}, {}]; acc.getImagePosition(Ci.nsIAccessibleCoordinateType.COORDTYPE_WINDOW_RELATIVE, ax, ay); acc.getImageSize(aw, ah); var rect = { left: ax.value, top: ay.value, width: aw.value, height: ah.value }; var ratio = rect.height / rect.width; image.style.width = rect.width + imgZoom + "px"; tooltip.openPopup(img, "topleft", -1, -1, false, false, null); tts.opacity = "0"; image.onload = function() { var k = mozInnerScreenY < 0 ? -mozInnerScreenY : 0; var left = rect.left - (outerWidth - innerWidth) / 2 - imgZoom / 2; var top = rect.top - ratio * imgZoom / 2; if (left < 0) left = 0; if (top < k) top = k; var r = left + rect.width + imgZoom - innerWidth; if (r > 0) left -= r; var b = top + rect.height + ratio * imgZoom - innerHeight; if (b > 0) top -= b; tts.top = top + "px"; tts.left = left + "px"; tts.position = "fixed"; tts.opacity = ""; }; image.setAttribute("src", base64); // прокрутка на подсказке меняет размеры изображения, на странице закрывает его .... function imageZoom(e) { if (e.target != image) { removeTooltip(); return; } var zoom = (e.detail < 0 ? scrollZoom : -scrollZoom) * scrollTop; var zx = zoom / 2, zy = zx * ratio; var rect = tooltip.getBoundingClientRect(); var left = rect.left - zx, top = rect.top - zy; if (zoom > 0) { var k = mozInnerScreenY < 0 ? -mozInnerScreenY : 0; if (left - zx < 0 && rect.right < innerWidth) left = 0; var r = rect.right + zx - innerWidth; if (r > 0 && left > 0) left -= r; if (top < k && rect.bottom < innerHeight) top = k; var b = rect.bottom + zy - innerHeight; if (b > 0 && top > k) top -= b; } image.style.width = rect.width + zoom + "px"; tts.left = left + "px"; tts.top = top + "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); // удалить по клику на странице } })();
Отсутствует
bunda1
Ну на мой взгляд теперь совсем другое дело, увеличение просто безупречное. Огромное спасибо тебе и Dumby. И с Новым Годом Вас.
Отредактировано voqabuhe (02-01-2014 23:44:12)
Отсутствует
bunda1 пишетВерсия: от 14.03.2014
В не работает. С версией от 02.01.2014 всё ОК.
Теперь попробуй Увеличивать размеры изображений из контекстного меню на странице
Отсутствует
voqabuhe пишет: bunda1 пишет: Версия: от 14.03.2014В не работает. С версией от 02.01.2014 всё ОК.Теперь попробуй Увеличивать размеры изображений из контекстного меню на странице
А можно ли увеличивать размеры не по контекстному меню, а по длинному клику на картинку? Или просто по ховерингу?
Хорошо, когда у человека есть выбор, но плохо, когда он перед ним стоит ©
Отсутствует
bunda1, иногда необхдимо рассмотреть определенную деталь на изображении, его увеличиваешь, а потом двигаешь, фокусируясь на искомом объекте.. Другой сценарий: изображение увеличили, и оно еще нужно, но оно закрыло что-то также нужное в екущий ммент на страничке...
SeaMonkey 2.39 forever
Отсутствует