Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Как уменьшить размер изображения с помощью JS? (https://javascript.ru/forum/css-html/55283-kak-umenshit-razmer-izobrazheniya-s-pomoshhyu-js.html)

Dimaz 21.04.2015 12:24

Как уменьшить размер изображения с помощью 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
Есть какие-нибудь ещё варианты? Грузить сначала на сервак и там уменьшать хотелось бы в последнюю очередь. Потом всё это будет занимать место и нужно будет постоянно чистить. Хотелось бы на клиенте всё реализовать.

рони 21.04.2015 13:28

Dimaz,
проще добавить 5 строк в плагин

Dimaz 21.04.2015 13:33

Цитата:

Сообщение от рони (Сообщение 367612)
Dimaz,
проще добавить 5 строк в плагин

В смысле? Какие 5 строк?)

рони 21.04.2015 13:36

Dimaz,
открыть плагин -- подумать и добавить параметры для высоты и ширины

Dimaz 21.04.2015 13:52

Цитата:

Сообщение от рони (Сообщение 367615)
Dimaz,
открыть плагин -- подумать и добавить параметры для высоты и ширины

$srcImg.css({width:'auto',height:'auto',visibility:'visible'});

Менял эту строчку кода. Изображение не стало меньше, оно просто обрезалось.

рони 21.04.2015 13:59

Dimaz,
направление мысли правильное - и как раз получили нужный размер и никаких обрезаний нету - думайте дальше :) что же такое "обрезалось" и как это поправить ?
в прочем уже есть готовый вариант и даже под современую jquery :write:

Dimaz 21.04.2015 14:05

Цитата:

Сообщение от рони (Сообщение 367621)
Dimaz,
направление мысли правильное - и как раз получили нужный размер и никаких обрезаний нету - думайте дальше :) что же такое "обрезалось" и как это поправить ?
в прочем уже есть готовый вариант и даже под современую jquery :write:

Хорошо, подумаю) Готовый вариант скрипта пазлов? Я видел готовые варианты, даже на canvas, но мне понравился именно этот вариант. В большинстве случаев обычно простые "детские" пазлы, где можно перемещать пазл куда угодно. Это слишком просто:)

рони 21.04.2015 14:16

Цитата:

Сообщение от Dimaz
понравился именно этот вариант

именно этот и есть :)
осталось добавить в пару мест
backgroundSize и отменить устаревшие методы jquery, желаите сами помучатся или договоримся? :lol:

Dimaz 21.04.2015 14:29

Цитата:

Сообщение от рони (Сообщение 367623)
именно этот и есть :)
осталось добавить в пару мест
backgroundSize и отменить устаревшие методы jquery, желаите сами помучатся или договоримся? :lol:

пока сам попробую) думал как-то о background-size кстати.
Устаревшие методы? Имеете в виду это:
Uncaught TypeError: Cannot read property 'msie' of undefined
Если да, то уже удалил этот код.
P.S. хотя лучше наверно не удалять, а поменять) а хотя IE вообще скоро не будет. В win10 хотят убрать его и поменять на новый браузер Spartan.

Dimaz 21.04.2015 15:18

Сделал. Спасибо за помощь!

рони 21.04.2015 15:21

Dimaz,
и что в background-size поставил?

Dimaz 21.04.2015 15:30

Цитата:

Сообщение от рони (Сообщение 367635)
Dimaz,
и что в background-size поставил?

То же самое что и в srcImg.
$srcImg.css({width:'302',height:'184',visibility:'visible'});
//...
backgroundSize:'302px 184px'

Всё работает как надо.

рони 21.04.2015 15:47

Dimaz,
ок
на всякий случай
// handle internet explorer quirks mode box model
            *!*    $.boxModel = true;*/!*

Dimaz 21.04.2015 20:40

Цитата:

Сообщение от рони (Сообщение 367638)
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, тогда становится нормально. Почему так происходит не пойму.

рони 21.04.2015 21:04

Dimaz,
1. где у вас в коде размер окна?
2. может размер не ровный и требуется Math.round(x)
3. нужен живой пример

Dimaz 21.04.2015 21:21

Цитата:

Сообщение от рони (Сообщение 367674)
Dimaz,
1. где у вас в коде размер окна?
2. может размер не ровный и требуется Math.round(x)
3. нужен живой пример

Код, приведенный выше стоит сразу после $srcImg.one('load',function(){
Размеры окна хранятся в переменных w и h, которые в коде выше.
Размер фона ставлю так backgroundSize:w
Это всё не важно. Факт в том, что даже если установить значение вручную, всё равно картинка немного размыта. Т.е.:
var w=830, h=622;
$srcImg.css({width:w,height:h,visibility:'visible'});
backgroundSize: '830px 622px';

Всё равно картинка размыта. С 832*624 становится норм. Т.е. всего нужно прибавить 2 пикселя к ширине и высоте. Почему так?

рони 21.04.2015 22:11

Dimaz,
могу только повторить все три вопроса - у себя проверил что 622 что 624 одинаково

Dimaz 21.04.2015 23:16

Цитата:

Сообщение от рони (Сообщение 367681)
Dimaz,
могу только повторить все три вопроса - у себя проверил что 622 что 624 одинаково

На jsfiddle разместил https://jsfiddle.net/5vht0pL1/
Попробуйте менять размер окна, где отображается фотка. Когда-то она будет расплывчатой, когда-то нет. Всё зависит от размера этого окошка. Вот только почему так происходит и как это исправить?

рони 21.04.2015 23:25

Dimaz,
я наверно, что-то не понимаю или менять размер не умею.

Dimaz 21.04.2015 23:37

Цитата:

Сообщение от рони (Сообщение 367687)
Dimaz,
я наверно, что-то не понимаю или менять размер не умею.

Добавил стили из файла. Теперь всегда размыто, независимо от размера https://jsfiddle.net/5vht0pL1/3/
После добавления стилей, если присмотреться, то справа, когда заканчивается пазл видна картинка шириной где-то 1 пиксель. Тоже непонятно откуда она взялась

Dimaz 21.04.2015 23:45

Вот этот лишний пиксель. Тут даже больше пикселя

рони 21.04.2015 23:49

Dimaz,
доделайте режим оригинал -- может вы фон видите несовпадающий с пазлом -- как связан ваш код, с размерами окошка, для меня загадка :)

Dimaz 21.04.2015 23:54

Цитата:

Сообщение от рони (Сообщение 367692)
Dimaz,
доделайте режим оригинал -- может вы фон видите несовпадающий с пазлом -- как связан ваш код, с размерами окошка, для меня загадка :)

В смысле режим оригинал? Я только что вам скинул ссылку на jsFiddle и скрин взял оттуда же. У вас в jsFiddle всё нормально отображается? Размытия нет? Лишней полоски справа тоже нет?
Фон не совпадающий с пазлом? Это как?
Честное слово. Я вам говорю так, как я это вижу в jsFiddle, а не где-то там в локальном скрипте.

рони 21.04.2015 23:59

Цитата:

Сообщение от Dimaz
Лишней полоски справа тоже нет?

либо это решено в посте 13 - либо я непонимаю о какой полоске речь .
в пазле есть кнопка оригинал нажмите и посмотрите какую ... вы должны собрать

Dimaz 22.04.2015 00:01

рони,
Кажется у меня есть догадки. При моем разрешении экрана размер окна браузера 1280*760. После проверки и уменьшения картинки её размер становится 830*622. Делим 830 на 4 пазла и получаем 207,5 пикселей на каждый пазл. Отсюда видимо и размытие.
P.S. и полоска видимо тоже из-за этого

рони 22.04.2015 00:07

Dimaz,
https://learn.javascript.ru/metrics-window

Dimaz 22.04.2015 00:22

Цитата:

Сообщение от рони (Сообщение 367696)

Спасибо!:thanks:
С document.documentElement.clientWidth и document.documentElement.clientHeight больше не размывается и полоска исчезла.

рони 22.04.2015 00:26

Dimaz,
работа моего варианта


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