Эта проблема связана с тем, что при загрузке файлов изображений фон ограничивает размер до 2 МБ, но когда камера включается для съемки, он превышает 2 МБ каждую минуту. Чтобы не влиять на пользовательский опыт и функциональные требования, размер файла увеличивается. интерфейсу необходимо сжать размер, а затем загрузить его за кулисы.
Анализ идеиПосле поиска большого количества информации я обнаружил, что только холст может сжимать изображения.
Принцип примерно следующий: 1. Сначала преобразуйте файл изображения в baseURL. 2. Создайте тег изображения, чтобы получить файл и получить ширину, высоту и пропорции изображения. 3. Создайте холст и установите его размер. 4. Нарисуйте картинку на холсте. 5. Сожмите холст и получите новый baseURL. 6. Преобразуйте baseURL обратно в файл.
функция помещения Преобразование файла файла в base64 /*** @param {поток двоичного файла} file * @param {функция обратного вызова, возврат base64} fn */functionchangeFileToBaseURL(file,fn){ // Создание объекта чтения файла var fileReader = new FileReader(); Если файл не определен, верните значение null if(file == undefined) return fn(null); // Чтение файла file, результат — base64-битный fileReader.readAsDataURL(file); fileReader.onload = function(){ // Чтение base64 var imgBase64Data = this.result; fn(imgBase64Data); Преобразование base64 в файловый поток /** * Преобразование base64 в файл * @param {baseURL} dataurl * @param {имя файла} имя файла * @return {двоичный поток файла}*/function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(' , '), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); return new File([u8arr], filename, {type:mime}); Метод сжатия /*** сжатое изображение холста* @param {объектный параметр} param * @param {двоичный поток файла} param.file требуется* @param {целевой размер сжатия} param.targetSize не передает первоначальное присвоение -1* @param {output Ширина изображения} param.width не передает начальное значение присвоения -1 и не передает высоту для пропорционального масштабирования* @param {имя выходного изображения} param.fileName не передает исходное присвоенное изображение* @param {степень сжатого изображения } param.quality не передает начальное значение присвоения 0,92. Диапазон значений 0~1* @param {функция обратного вызова} param.succ требуется */function pressImg(param){ //Если функция обратного вызова отсутствует, она не будет выполнена if(param && param.succ){ //Если файл не определен, возвращаем значение null if(param.file == undefined) return param.succ(null); //Прикрепляем начальное значение к параметру param.targetSize = param.hasOwnProperty(targetSize)? param.targetSize: -1; param.hasOwnProperty(width)? param.width: -1; param.fileName = param.hasOwnProperty(fileName)? param.fileName: image; param.quality = param.hasOwnProperty( качество) ? param.quality : 0.92; var _this = this // Получаем тип файла var fileType; = param.file.type; // console.log(fileType) //image/jpeg if(fileType.indexOf(image) == -1){ console.log('Пожалуйста, выберите файл изображения^_^'); return param.succ(null); } //Если текущий размер меньше целевого, напрямую выводим var size = param.file.size; if(param.targetSize > size){ return param.succ(param.file) } / / Прочитайте файл file, и результатом будет base64changeFileToBaseURL(param.file,function(base64){ if(base64){ var image = new Image(); image.src = base64; image.onload = function(){ / / Get соотношение сторон var Scale = this.width / this.height // console.log(scale //Создаем холст var Canvas = document.createElement('canvas'); //Получаем контекст var context = Canvas.getContext('2d'); //Получаем ширину сжатого изображения. Если ширина равна -1, ширина исходного изображения по умолчанию Canvas.width = param.width == -1 this. width : param.width; //Получаем высоту сжатого изображения. Если ширина равна -1, высота исходного изображения по умолчанию равна Canvas.height = param.width == -1? parseInt(param.width / Scale); //Рисуем изображение на холсте context.drawImage(image, 0, 0, Canvas.width, Canvas.height); //Сжимаем изображение и получаем новый base64Url var newImageData = Canvas. toDataURL(fileType,param.quality); //Преобразуем base64 в файловый поток var resultFile = dataURLtoFile(newImageData,param.fileName); //Определите, если targetSize ограничен и размер сжатого изображения больше целевого размера, появится сообщение об ошибке if(param.targetSize != -1 && param.targetSize < resultFile.size); ){ console.log(Размер загружаемого изображения слишком велик, загрузите повторно^_^); param.succ(null); }else{ // Возвращаем файловый поток param.succ(resultFile); } } } }); Использование методаРазмер файла указан в байтах, поэтому нам нужно преобразовать нужный размер в байты. 1 байт это 1 байт это 1Б, 1КБ = 1024Б, 1МБ = 1024*1024Б
<тип ввода=идентификатор файла=fileImg class=fileImg/>
//Получаем URL-адрес загрузки файла изображения$(#fileImg).on('change',function(){ pressImg({ file:this.files[0], targetSize:2 * 1024 * 1024, качество: 0,5, ширина: 600 , succ:function(resultFile){ //Если оно не равно нулю, сжатие выполнено успешно if(resultFile){ //TODO } } })}); Краткое описание проблемы Уровень сжатия изображенияСтепень сжатия изображения определить непросто, поэтому можно многократно пробовать и корректировать под требования требовательного. Изменение размера и разрешения целевого изображения может изменить степень сжатия изображения.
Первоначально я хотел выполнить рекурсивный процесс сжатия изображений до тех пор, пока размер изображения не будет соответствовать ожиданиям.Позже узнал
Потому что когда ios вызывает системную камеру для съемки, она поворачивается на 90 градусов против часовой стрелки. После того, как я сжал изображение и отправил его на задний план, я обнаружил, что направление съемки exif-информации изображения было потеряно, в результате чего изображения, загруженные iOS, были повернуты на 90 градусов против часовой стрелки. Android никогда не замечал этой проблемы.
В настоящее время есть некоторые подозрения, что он был утерян при преобразовании base64 в файл file. Дополнительные инструкции будут предоставлены здесь после проверки.
@version1.0-2019-8-2-Создать «Использовать холст для сжатия размера изображения»
©burning_Юнь Цици
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.