Реализация чистого внешнего JS-сжатия изображений

внешний интерфейс JavaScript WordPress Canvas

Эта статья сокращена от:Ууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу

1. Функциональный опыт

Первый взгляд на демо:Используйте холст для сжатия изображений во внешнем интерфейсе и загрузки демо.

Скриншот ниже:

相貌平平文件选择框

Нажмите на поле выбора файла, мы могли бы также выбрать более крупную картинку, например следующую фотографию улова рыбалки размером более 2M:

上传演示使用的图片

Итак, картинки были загружены одна за другой:
上传相关信息截图

На этом этапе, когда мы нажмем на окончательный адрес загруженного изображения, мы обнаружим, что исходное изображение шириной более 2M и более 3000 пикселей ограничено шириной 400 пикселей:
图片缩小后在浏览器中的预览效果图

Если вы сохраните его локально, вы обнаружите, что размер изображения стал всего 70 КБ:
保存到本地显示的图片尺寸

Выше приведена полная демонстрация внешнего сжатия изображений и демо-загрузки.

Во-вторых, принцип реализации

Чтобы использовать JS для сжатия изображений, принцип на самом деле очень прост, основной API должен использоватьcanvasизdrawImage()метод.

Canvas по сути является растровым изображением, иdrawImage()Метод может нарисовать большую картинку на маленьком холсте Canvas, что эквивалентно сжатию размера изображения в ближайшее время?

Для сжатия этого случая используется метод API с 5 параметрами:

context.drawImage(img, dx, dy, dWidth, dHeight);

Конкретное значение каждого параметра см. в разделе "Документация по Canvas API на китайском языке-drawImage", здесь не раскрыто.

Пример:
изображение (при условии, что объект изображенияimg) исходный размер 4000*3000, а теперь нужно ограничить размер до 400*300, что очень просто.Принцип такой:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 300;
// 核心JS就这个
context.drawImage(img,0,0,400,300);

Нарисуйте большую картину на маленьком холсте, а компрессия реализована так, не правда ли просто и немного за гранью воображения.

3. Если вы хотите загрузить или скачать?

Если вы хотите загрузить изображения или загрузить изображения, вы можете использоватьcanvas.toDataURL()илиcanvas.toBlob()метод преобразуется первым.

1. canvas.toDataURL()
Синтаксис следующий:

canvas.toDataURL(mimeType, qualityArgument)

Холст может быть преобразован в информационную информацию формата base64, графическое представление чистых символов.

в:
mimeTypeвыражатьcanvasэкспортируетсяbase64Тип изображения, по умолчанию формат png, то есть значение по умолчанию'image/png', мы также можем указать формат jpg'image/jpeg'Или webp и другие форматы.fileв объектеfile.typeЭто тип mimeType файла, который можно использовать непосредственно при конвертации (при наличии файлового объекта).
qualityArgumentУказывает качество экспортируемого изображения, если экспортjpgиwebpЭтот параметр действует только при использовании формата Значение по умолчанию:0.92, является приемлемым выходным параметром качества изображения, обычно его не нужно задавать.

Дополнительную информацию о методе toDataURL() можно найти в разделе "Документация Canvas API на китайском языке-toDataURL()".

2. Метод canvas.toBlob()
Синтаксис следующий:

canvas.toBlob(callback, mimeType, qualityArgument)

Можно преобразовать холст вBLOB-файл, обычно используемый при загрузке файлов, поскольку он двоичный и более удобен для серверной части.

иtoDataURL()По сравнению с методом,toBlob()Метод асинхронный, поэтомуcallbackпараметр, этоcallbackПервый параметр метода обратного вызова по умолчанию — преобразованный.blobИнформация о файле, загрузка файла в демонстрационном примере в начале этой статьи заключается в загрузкеcanvasПреобразование изображения в двоичноеblobфайл, а затемajaxЗагрузил, код такой:

// canvas转为blob并上传
canvas.toBlob(function (blob) {
  // 图片ajax上传
  var xhr = new XMLHttpRequest();
  // 开始上传
  xhr.open("POST", 'upload.php', true);
  xhr.send(blob);    
});

Дополнительную информацию о методе toBlob() можно найти в разделе "Документация по Canvas API на китайском языке-toBlob()".

Когда у вас есть передаваемые данные изображения, можно выполнять загрузку и загрузку. Например, чтобы загрузить сжатый образ внешнего интерфейса, вы можете обратиться к моей последней статье, опубликованной на Nuggets: "Чистый JS генерирует и загружает различные текстовые файлы или изображения".

4. Резюме

После трех шагов «изображение → сжатие холста → изображение» мы завершили функцию внешнего сжатия изображения.

Выше, спасибо за чтение!



Категории