Как уменьшить размер изображения с помощью 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 строк в плагин

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

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

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

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

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

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

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

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

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

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

То же самое что и в srcImg.

$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. нужен живой пример

Код, приведенный выше стоит сразу после $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 пикселя к ширине и высоте. Почему так?

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

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

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

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

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

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

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

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

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

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

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

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