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

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


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