Общий метод сжатия изображений в JS

внешний интерфейс сервер JavaScript API

За последнее время библиотека изображений претерпела серьезные изменения, было добавлено много новых методов.Одной из важных особенностей является то, что она можетСжать изображение, указав размер, заинтересованные студенты могут обратиться кэта статья, или напрямую обратитесь к репозиторию GitHubimage-conversion;

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

1. Каков спрос?

Прежде всего, каковы наши потребности? В большинстве случаев нам нужно сжать объект File, а затем преобразовать его в объект File и передать на удаленный сервер изображений; иногда нам также нужно сжать строку base64, а затем преобразовать ее в строку base64 и передать ее в удаленная база данных; Это также может быть холст, или объект изображения, или непосредственно URL-адрес изображения. Нам нужно сжать их и загрузить на удаленную базу данных; Столкнувшись с таким количеством требований, Ван Эр просто нарисовал картинку:

Alt text

Во-вторых, решение

Как показано на рисунке выше, Ван Эр написал в общей сложности семь методов, которые в основном охватывают преобразование и сжатие большинства типов файлов в JS, в том числе:

1,urltoImage(url,fn)Требуемый объект изображения будет загружен через URL-адрес, гдеurlпараметр передается изображениюurl,fnДля метода обратного вызова он содержит параметр объекта Image, и код выглядит следующим образом:

function urltoImage (url,fn){
    var img = new Image();
    img.src = url;
    img.onload = function(){
        fn(img);
    }
};

2,imagetoCanvas(image)будет одинImageобъект превращается вCanvasтип объекта, гдеimageПараметр передается в объекте Image, код выглядит следующим образом:

function imagetoCanvas(image){
    var cvs = document.createElement("canvas");
    var ctx = cvs.getContext('2d');
    cvs.width = image.width;
    cvs.height = image.height;
    ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
    return cvs ;
};

3.canvasResizetoFile(canvas,quality,fn)будет одинCanvasуплотнение объекта вBlobтип объекта; гдеcanvasпараметр для передачи вCanvasобъект;qualityПараметр передается в формате 0-1numberТип, указывающий качество сжатия изображения;fnметод обратного вызова, включающийBlobПараметры объекта, код выглядит следующим образом:

function canvasResizetoFile(canvas,quality,fn){
    canvas.toBlob(function(blob) {
        fn(blob);
    },'image/jpeg',quality);
};

здесьBlobОбъекты представляют собой неизменяемые файловые объекты необработанных данных.Blobзначит не обязательноJavaScriptданные в исходном виде.Fileинтерфейс на основеBlob,наследоватьBlobфункциональность и расширить ее для поддержки файлов в системе пользователя. Мы можем рассматривать его как тип файла, и можно указать другие более конкретные варианты использования.Документация MDN

4.canvasResizetoDataURL(canvas,quality)будет одинCanvasуплотнение объекта вdataURLстрока, гдеcanvasпараметр для передачи вCanvasобъект;qualityПараметр передается в формате 0-1numberТип, указывающий на качество сжатия изображения, код выглядит следующим образом:

methods.canvasResizetoDataURL = function(canvas,quality){
    return canvas.toDataURL('image/jpeg',quality);
};

один из нихtoDataURLAPI может относиться кДокументация MDN

5.filetoDataURL(file,fn)будетFile(Blob) введите файл вdataURLстрока, гдеfileпараметр для передачи вFile(Blob) тип файла;fnметод обратного вызова, включающийdataURLПараметры строки; код выглядит следующим образом:

function filetoDataURL(file,fn){
    var reader = new FileReader();
    reader.onloadend = function(e){
        fn(e.target.result);
    };
    reader.readAsDataURL(file);
};

6.dataURLtoImage(dataurl,fn)поставит строкуdataURLнанизывать наImageтип файла, которыйdataurlпараметр для передачи вdataURLнить,fnметод обратного вызова, включающийImageПараметры типа файла кода следующие:

function dataURLtoImage(dataurl,fn){
    var img = new Image();
    img.onload = function() {
        fn(img);
    };
    img.src = dataurl;
};

7.dataURLtoFile(dataurl)поставит строкуdataURLнанизывать наBlobтип объекта, гдеdataurlпараметр для передачи вdataURLСтрока, код такой:

function dataURLtoFile(dataurl) {
    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 Blob([u8arr], {type:mime});
};

3. Дальнейшая инкапсуляция

Для часто используемыхFileПосле сжатия объект становитсяFileобъект, мы можем снова инкапсулировать вышеуказанный метод, обратимся к следующему коду:

function fileResizetoFile(file,quality,fn){
    filetoDataURL (file,function(dataurl){
        dataURLtoImage(dataurl,function(image){
            canvasResizetoFile(imagetoCanvas(image),quality,fn);
        })
    })
}

в,fileпараметр для передачи вFile(Blob) тип файла;qualityпараметр для передачи в0-1изnumberТип, указывающий качество сжатия изображения;fnметод обратного вызова, включающийBlobПараметры типа файл.

Он используется следующим образом:

var file = document.getElementById('demo').files[0];
fileResizetoFile(file,0.6,function(res){
    console.log(res);
    //拿到res，做出你要上传的操作；
})

В этом случае можно легко выполнить сжатие и загрузку изображения.Вышеупомянутые 8 методов были упакованы и размещены вgithubЭто вверх, если вам это нравится, вы можете поставить звезду.

Справочная документация:MDN

Категории