Сжать изображения, указав размер в JS

JavaScript

Не так давно Ван Эр написалБиблиотека обработки изображений, вы можете указать качество изображения для сжатия изображения, вызвав собственный метод javaScripttoDataURLа такжеtoBlob, в библиотеке есть следующие методы:

Alt text

Но сжатие изображений по качеству имеет некоторые недостатки:Невозможно определить размер сжатого изображения;

Например, на картинке ниже Ван Эр случайным образом выбрал три картинки для тестирования (заинтересованные друзья могуткликните сюдаСамопроверка), ось x на рисунке — это качество сжатия изображения, значение равно 0~1, а ось y — это коэффициент сжатия изображения:

Alt text

Можно видеть, что при одинаковой настройке качества сжатого изображения степень сжатия каждого изображения отличается;

В реальной разработке у нас могут быть такие требования:Укажите размер изображения для сжатия изображения. Ван Эр посмотрел на github и не нашел js-библиотеки, реализующей этот метод, поэтому Ван Эр сделал некоторые модификации на основе оригинальной библиотеки для реализации этой функции.

Следующее изображение представляет собой карту методов новой библиотеки:

Alt text

Новая библиотека была оптимизирована следующим образом:

  • Поддержка png, gif, сжатие изображений в формате jpeg
  • Добавить кdownloadFile()метод
  • Вы можете установить длину и ширину сжатого изображения, а также соотношение сторон изображения.
  • Вы можете установить направление вращения сжатого изображения
  • Сжать файлы, указав размер
  • eslint
  • Асинхронный вызов с обещанием, синхронизация/ожидание

В настоящее время метод указания размера для сжатия изображения станет очень простым, а именно:

//将图片压缩到100KB
imageConversion.compressAccurately(file,100);

//还可以加上其他选项，指定压缩图片的精确度、类型、宽度、高度、旋转方向、缩放
imageConversion.compressAccurately(file,{
  size: 100,    //The compressed image size is 100kb
  accuracy: 0.9,//the accuracy of image compression size,range 0.8-0.99,default 0.95;
                //this means if the picture size is set to 1000Kb and the
                //accuracy is 0.9, the image with the compression result
                //of 900Kb-1100Kb is considered acceptable;
  type: "image/png",
  width: 300,
  height: 200,
  orientation:2,
  scale: 0.5,
})

может относиться кgithubУзнайте больше о том, как его использовать.

выполнитьcompressAccuratelyПринцип метода на самом деле очень прост, т.Найдите качество изображения, наиболее близкое к указанному размеру, по дихотомии.

Если вы хотите испытать это на себе, вы можетекликните сюдаонлайн опыт. Если есть какие-либо проблемы с использованием, пожалуйста, сообщите мне о проблеме вовремя.

Если тебе хорошо, не забудь прийтиgithubзвезда это.

Оригинальный адрес:Личный сайт Ван Юлюэ

Категории