Html5 Canvas изменить размер

Question

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

Например,

Я изменял размер файла изображения JPEG размером 2,5 МБ с размерами от 2592 x 1936 до 1296 x 968 (файл JPEG) и пытался загрузить его на сервер.На сервере я вижу, что файл сохраняется с размером 3,5 МБ.

Есть ли что-то, что мы можем сделать при изменении размера с помощью html5 canvas, чтобы при уменьшении размеров можно было ожидать некоторого уменьшения размера файла, например сжатия.

Answer 1

Если вы используете toDataURL, вы можете установить второй аргумент в число от 0,0 до 1,0.Это уровень качества JPEG, где 1,0 означает очень высокое качество и очень большое изображение, а ближе к 0,0 означает более низкое качество изображения меньшего размера.

Так, например, вы можете попробовать:

 data = downsizedCanvas.toDataURL("image/jpeg", 0.2);

Вот описание в справочнике w3c: www.w3.org: toDataURL

Похоже, в Firefox была ошибка, связанная с игнорированием качества, поэтому вам может потребоватьсяпроверить в некоторых современных браузерах.