Как уменьшить размер изображения с помощью JS?
Добрый день. Хочу поставить на свой сайт готовый скрипт игры "пазлы". Но, хочу немного его доработать. Т.е. добавить возможность загрузки своей картинки из интернета.
Есть проблема. Если картинка имеет слишком большое разрешение, то играть становится не удобно. Как уменьшить эту картинку до адекватного размера, чтобы она не выходила за рамки окна? Пробовал сделать это через canvas https://jsfiddle.net/mbL2tfvp/ Т.е. сначала загрузить в canvas и уменьшить, затем считать из него же и создать новый тег img. Выводит ошибку: Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. Т.е. браузер начинает ругаться из-за политики безопасности. Вот сам скрипт пазлов http://www.2meter3.de/jqPuzzle/index.html Есть какие-нибудь ещё варианты? Грузить сначала на сервак и там уменьшать хотелось бы в последнюю очередь. Потом всё это будет занимать место и нужно будет постоянно чистить. Хотелось бы на клиенте всё реализовать. |
Dimaz,
проще добавить 5 строк в плагин |
Цитата:
|
Dimaz,
открыть плагин -- подумать и добавить параметры для высоты и ширины |
Цитата:
$srcImg.css({width:'auto',height:'auto',visibility:'visible'}); Менял эту строчку кода. Изображение не стало меньше, оно просто обрезалось. |
Dimaz,
направление мысли правильное - и как раз получили нужный размер и никаких обрезаний нету - думайте дальше :) что же такое "обрезалось" и как это поправить ? в прочем уже есть готовый вариант и даже под современую jquery :write: |
Цитата:
|
Цитата:
осталось добавить в пару мест backgroundSize и отменить устаревшие методы jquery, желаите сами помучатся или договоримся? :lol: |
Цитата:
Устаревшие методы? Имеете в виду это: Uncaught TypeError: Cannot read property 'msie' of undefined Если да, то уже удалил этот код. P.S. хотя лучше наверно не удалять, а поменять) а хотя IE вообще скоро не будет. В win10 хотят убрать его и поменять на новый браузер Spartan. |
Сделал. Спасибо за помощь!
|
Dimaz,
и что в background-size поставил? |
Цитата:
$srcImg.css({width:'302',height:'184',visibility:'visible'}); //... backgroundSize:'302px 184px' Всё работает как надо. |
Dimaz,
ок на всякий случай // handle internet explorer quirks mode box model *!* $.boxModel = true;*/!* |
Цитата:
var w,h;if(this.width>this.height){w=window.screen.availWidth-450,h='auto'}else if(this.height>this.width){h=window.screen.availHeight-120,w='auto'} Делаю такую проверку, чтобы изображение подстраивалось под размер окна браузера и не выходило за его рамки. Т.е., чтобы не было полос прокрутки. Вычитаю 450 из ширины и 120 из высоты, так как у меня на странице есть еще элементы, занимающие место. Загрузил картинку разрешением 1280*960. Размер окна 1280*760. После проверки, загруженная картинка уменьшается до размеров 830*622. По какой-то причине картинка становится немного размытой. Однако, если выставить разрешение 832*624, тогда становится нормально. Почему так происходит не пойму. |
Dimaz,
1. где у вас в коде размер окна? 2. может размер не ровный и требуется Math.round(x) 3. нужен живой пример |
Цитата:
Размеры окна хранятся в переменных w и h, которые в коде выше. Размер фона ставлю так backgroundSize:w Это всё не важно. Факт в том, что даже если установить значение вручную, всё равно картинка немного размыта. Т.е.: var w=830, h=622; $srcImg.css({width:w,height:h,visibility:'visible'}); backgroundSize: '830px 622px'; Всё равно картинка размыта. С 832*624 становится норм. Т.е. всего нужно прибавить 2 пикселя к ширине и высоте. Почему так? |
Dimaz,
могу только повторить все три вопроса - у себя проверил что 622 что 624 одинаково |
Цитата:
Попробуйте менять размер окна, где отображается фотка. Когда-то она будет расплывчатой, когда-то нет. Всё зависит от размера этого окошка. Вот только почему так происходит и как это исправить? |
Dimaz,
я наверно, что-то не понимаю или менять размер не умею. |
Цитата:
После добавления стилей, если присмотреться, то справа, когда заканчивается пазл видна картинка шириной где-то 1 пиксель. Тоже непонятно откуда она взялась |
Вот этот лишний пиксель. Тут даже больше пикселя
![]() |
Dimaz,
доделайте режим оригинал -- может вы фон видите несовпадающий с пазлом -- как связан ваш код, с размерами окошка, для меня загадка :) |
Цитата:
Фон не совпадающий с пазлом? Это как? Честное слово. Я вам говорю так, как я это вижу в jsFiddle, а не где-то там в локальном скрипте. |
Цитата:
в пазле есть кнопка оригинал нажмите и посмотрите какую ... вы должны собрать |
рони,
Кажется у меня есть догадки. При моем разрешении экрана размер окна браузера 1280*760. После проверки и уменьшения картинки её размер становится 830*622. Делим 830 на 4 пазла и получаем 207,5 пикселей на каждый пазл. Отсюда видимо и размытие. P.S. и полоска видимо тоже из-за этого |
|
Цитата:
С document.documentElement.clientWidth и document.documentElement.clientHeight больше не размывается и полоска исчезла. |
|
Часовой пояс GMT +3, время: 14:06. |