Пример кода для Canvas и сжатия изображений

Ранее я уже писал статью об обработке изображений Canvas. Сегодня мы поговорим о том, как использовать Canvas для сжатия изображений.

Далее я объясню конкретный процесс сжатия изображений Canvas на конкретных примерах.

1. Получите локальные файлы

 <!--HTML--><тип ввода=идентификатор файла=выбрать-img />

 // JSvar ChooseImg = document.getElementById(choose-img); selectImg.onchange = function(e){ var file = this.files[0]; // ... (Часть кода опущена и будет показана на рисунке). последовательность, то же самое ниже)};

Это очень просто, достаточно получить локальный файл через кнопку с типом файла.

 <!--HTML--><div id=result></div>

 // JSvar result = document.getElementById(result); // Используется для отображения результатов вывода изображения или сообщений об ошибках if(/image/.test(file.type)){ // Определяем, является ли тип файла изображением // ... }else{ result.innerHTML = '<span style=color: red;>Неправильный тип файла! </span>';}

 var img = new Image(), // Создаем объект изображения для размещения исходного изображения. reader = new FileReader();reader.readAsDataURL(file); // Читаем в формате base64 и сохраняем его в атрибуте result объекта FileReader; читатель .onload = function(){ img.src = this.result; Непосредственно назначьте строку изображения в формате base64 для document.body.insertBefore(img,chooseImg) в src объекта Image // Вставьте выходное изображение перед кнопкой файла img.onload = function(){ // ... }; };

 var Canvas = document.createElement('canvas');canvas.width = img.clientWidth;canvas.height = img.clientHeight;var context = Canvas.getContext('2d');

Примечание. Размер холста такой же, как ширина и высота входного изображения.

 context.drawImage(img,0,0,canvas.width,canvas.height);

 <!--HTML-->Коэффициент сжатия изображения: <input id=rate type=number min=0 max=100 /> %

 // JSvarrate = document.getElementById(rate).value || 100; // Введите степень сжатия изображения, по умолчанию — 100% var imgUrl = Canvas.toDataURL(file.type,rate/100); параметр — тип выходного изображения, а второй — степень сжатия result.innerHTML = 'После сжатия: <img src='+ imgUrl +' />' //; Отображение сжатого изображения в результате img.style.display = 'none'; // Скрываем исходное изображение;

Снова выведите изображение, нарисованное на Canvas, в формате base64.

 <!--HTML-->Коэффициент сжатия изображения: <input id=rate type=number min=0 max=100 /> %<input type=file id=choose-img /><div id=result></div >

 // JSvar ChooseImg = document.getElementById(choose-img), result = document.getElementById(result);chooseImg.onchange = function(e){ var file = this.files[0]; if(/image/.test( file.type)) { var img = новое изображение (), читатель = новый FileReader (); ReadAsDataURL (файл); Reader.onload = function(){ img.src = this.result; document.body.insertBefore(img,chooseImg); img.onload = function() { var Canvas = document.createElement('canvas'); ; холст.высота = img.clientHeight вар контекст = холст.getContext('2d'); context.drawImage(img,0,0,canvas.width,canvas.height); var тариф = document.getElementById(rate).value || var imgUrl = Canvas.toDataURL(file.type,rate/100); result.innerHTML = 'После сжатия: <img src='+ imgUrl +' />'; result.style.display = 'block'; img.style.display = 'none'; }; }; } else{ result.innerHTML = '<span style=color: red;>Неверный тип файла! </span>'; }};

После тестирования было обнаружено, что эффект сжатия изображений в формате JPEG лучше всего проявляется через Canvas, тогда как эффект сжатия PNG не очевиден, а иногда и становится больше.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.