Как автоматически уменьшить размер изображения при загрузке с использованием JavaScript - PullRequest
Новая
       20

Как автоматически уменьшить размер изображения при загрузке с использованием JavaScript

0 голосов
/ 06 ноября 2018

Я пытался автоматически изменить размер изображения при загрузке. когда кнопка нажата, я сначала проверяю файл, и он включает: 

lastModified: 1540955349935
lastModifiedDate: Wed Oct 31 2011 11:09:09 GMT+0800 (Singapore Standard Time) {}
name: "3rd.jpg"
size: 4372841
type: "image/jpeg"
webkitRelativePath: ""

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

function b64toBlob(b64, onsuccess, onerror) {
    var img = new Image();

    img.onerror = onerror;

    img.onload = function onload() {
        var canvas = document.createElement('canvas');
        canvas.width = img.width/4;
        canvas.height = img.height/4;

        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, img.width, img.height,0,0,canvas.width,canvas.height);

        canvas.toBlob(onsuccess);
    };

    img.src = b64;

}

но сначала мне нужно конвертировать файл в based64. затем вызовите функцию, чтобы преобразовать ее в BLOB-объект. 

$('input[type=file]').on('change',function () {
   var files = $(this).files;
   console.log(files[0])
   var fileReader = new FileReader();

   fileReader.readAsDataURL(files[0]);

   fileReader.onload = function () {
       uploadFile = fileReader.result;
       b64toBlob(uploadFile, function(blob) {
           console.log(blob);
           var url = _URL.createObjectURL(blob);
       }, function(error) {

       }


   }
})

но когда я проверяю файл после преобразования, это включает только размер и тип. не те данные, которые были до того, как они были преобразованы. 

size: 1070433
type: "image/png"

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

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

...