Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> JS+Canvas ресайз фото на выходе меньший размер
GET  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



TERRAFORMING ENGINEER
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 3847
Пользователь №: 21196
На форуме: 6 лет, 9 месяцев, 8 дней
Карма: 87




Привет.

Почитал статью на хабре:

https://habrahabr.ru/post/252175/

Поюзал здесь онлайн:

http://jsbin.com/komedawapu/1/edit?js,output

Вот код:

// noprotect

var width = 342;

function protect(img) {
var ratio = img.width / img.height;

var maxSquare = 5000000; // ios max canvas square
var maxSize = 4096; // ie max canvas dimensions

var maxW = Math.floor(Math.sqrt(maxSquare * ratio));
var maxH = Math.floor(maxSquare / Math.sqrt(maxSquare * ratio));
if (maxW > maxSize) {
maxW = maxSize;
maxH = Math.round(maxW / ratio);
}
if (maxH > maxSize) {
maxH = maxSize;
maxW = Math.round(ratio * maxH);
}
if (img.width > maxW) {
var canvas = document.createElement('canvas');
canvas.width = maxW;
canvas.height = maxH;
canvas.getContext('2d').drawImage(img, 0, 0, maxW, maxH);
img = canvas;
}

return img;
}

function resize(img, w, h) {
img = protect(img);
console.log(img.width, img.height);

var steps = Math.ceil(Math.log2(img.width / w));
var sW = w * Math.pow(2, steps - 1);
var sH = h * Math.pow(2, steps - 1);
var x = 2;

while (steps--) {
console.log(sW, sH);
var canvas = document.createElement('canvas');
canvas.width = sW;
canvas.height = sH;
canvas.getContext('2d').drawImage(img, 0, 0, sW, sH);
img = canvas;

sW = Math.round(sW / x);
sH = Math.round(sH / x);
}
return img;
}


function imageLoader(src) {
var df = $.Deferred();
var img = new Image();
img.onload = function() {
df.resolve(img);
};
img.onerror = function() {
df.reject(img);
};
img.src = src;
return df.promise();
}


$('#file').on('change', function() {
var images = $.map($('#file').prop('files'), function(file) {
return imageLoader(URL.createObjectURL(file));
});
$.when.apply(null, images).done(function() {
$.each(arguments, function(i, img) {
var height = Math.round(width * img.height / img.width);

canvas = resize(img, width, height);
$(img).attr({width: width, height: height});
$('body').append(
$("<p/>").append(
[
img, canvas]
)
);

});
});
});


Вроде ничего сложного, но мало знаю canavas, картинка на выходе:
user posted image

больше исходной:

по весу в два раза.
user posted image

Можно ли как-то подредактировать код, чтоб качество было ниже.


--------------------
Не тот велик, кто не падал, а тот кто падал и поднимался.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
sergeiss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Сидел он, дум великих полон - и вдаль глядел
******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 14980
Пользователь №: 4190
На форуме: 8 лет, 10 месяцев, 5 дней
Карма: 444




GET, а какая тебе разница, каков "вес" картинки в браузере? Если ты её никуда не сохраняешь, то и пофиг.
К тому же, понятие "вес картинки" - это понятие относительное smile.gif Если без упаковки, то вес картинки пропорционален размеру и битности цвета. А браузер внутри себя работает все-таки с неупакованными данными. Уменьшение размера (для сохраняемых файлов!!!) хорошо с целью хранения и уменьшения трафика при передаче по сети.


--------------------
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
PMICQ
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11789
Пользователь №: 23195
На форуме: 6 лет, 4 месяца, 17 дней
Карма: 429

Трезвый :
7 лет, 3 месяца, 17 дней




--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса