Użyj HTML5, aby zmienić rozmiar obrazu przed przesłaniem


102

Znalazłem kilka różnych postów, a nawet pytań dotyczących stackoverflow odpowiadających na to pytanie. Zasadniczo wdrażam to samo, co ten post .

Oto mój problem. Kiedy przesyłam zdjęcie, muszę również przesłać resztę formularza. Oto mój html:

<form id="uploadImageForm" enctype="multipart/form-data">
  <input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" />
  <input id="name" value="#{name}" />
  ... a few more inputs ... 
</form>

Wcześniej nie musiałem zmieniać rozmiaru obrazu, więc mój javascript wyglądał tak:

window.uploadPhotos = function(url){
    var data = new FormData($("form[id*='uploadImageForm']")[0]);

    $.ajax({
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function(data){
            ... handle error...
            }
        }
    });
};

To wszystko działało świetnie ... teraz, gdy muszę zmienić rozmiar obrazów ... jak mogę zastąpić obraz w formularzu, aby opublikowany został zmieniony rozmiar, a nie przesłany obraz?

window.uploadPhotos = function(url){

    var resizedImage;

    // Read in file
    var file = event.target.files[0];

    // Ensure it's an image
    if(file.type.match(/image.*/)) {
        console.log('An image has been loaded');

        // Load the image
        var reader = new FileReader();
        reader.onload = function (readerEvent) {
            var image = new Image();
            image.onload = function (imageEvent) {

                // Resize the image
                var canvas = document.createElement('canvas'),
                    max_size = 1200,
                    width = image.width,
                    height = image.height;
                if (width > height) {
                    if (width > max_size) {
                        height *= max_size / width;
                        width = max_size;
                    }
                } else {
                    if (height > max_size) {
                        width *= max_size / height;
                        height = max_size;
                    }
                }
                canvas.width = width;
                canvas.height = height;
                canvas.getContext('2d').drawImage(image, 0, 0, width, height);
                resizedImage = canvas.toDataURL('image/jpeg');
            }
            image.src = readerEvent.target.result;
        }
        reader.readAsDataURL(file);
    }


   // TODO: Need some logic here to switch out which photo is being posted...

    var data = new FormData($("form[id*='uploadImageForm']")[0]);

    $.ajax({
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function(data){
            ... handle error...
            }
        }
    });
};

Myślałem o przeniesieniu pliku wejściowego z formularza i posiadaniu ukrytego wejścia w formularzu, dla którego ustawiłem wartość na wartość obrazu o zmienionym rozmiarze ... Ale zastanawiam się, czy mogę po prostu zastąpić obraz, który jest już w formie.


Czy pracujesz z jakimkolwiek językiem po stronie serwera, czy tylko z HTML5 i JavaScriptem?
luke2012

1
@ luke2012 strona serwera java
ferics2

Może przytnij obraz po stronie klienta za pomocą czegoś takiego jak jCrop, a następnie wyślij współrzędne na stronę serwera i przytnij go. ieBufferedImage dest = src.getSubimage(rect.x, rect.y, rect.width, rect.height);
luke2012

4
@ luke2012 chodzi o zmniejszenie rozmiaru obrazu PRZED wysłaniem go na serwer.
ferics 2

Spójrz na źródło js pandamatak.com/people/anand/test/crop wydaje się być podobne ..
luke2012

Odpowiedzi:


161

Oto, co ostatecznie zrobiłem i zadziałało świetnie.

Najpierw przeniosłem plik wejściowy poza formularz, aby nie był przesyłany:

<input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" />
<form id="uploadImageForm" enctype="multipart/form-data">
    <input id="name" value="#{name}" />
    ... a few more inputs ... 
</form>

Następnie zmieniłem uploadPhotosfunkcję, aby obsługiwała tylko zmianę rozmiaru:

window.uploadPhotos = function(url){
    // Read in file
    var file = event.target.files[0];

    // Ensure it's an image
    if(file.type.match(/image.*/)) {
        console.log('An image has been loaded');

        // Load the image
        var reader = new FileReader();
        reader.onload = function (readerEvent) {
            var image = new Image();
            image.onload = function (imageEvent) {

                // Resize the image
                var canvas = document.createElement('canvas'),
                    max_size = 544,// TODO : pull max size from a site config
                    width = image.width,
                    height = image.height;
                if (width > height) {
                    if (width > max_size) {
                        height *= max_size / width;
                        width = max_size;
                    }
                } else {
                    if (height > max_size) {
                        width *= max_size / height;
                        height = max_size;
                    }
                }
                canvas.width = width;
                canvas.height = height;
                canvas.getContext('2d').drawImage(image, 0, 0, width, height);
                var dataUrl = canvas.toDataURL('image/jpeg');
                var resizedImage = dataURLToBlob(dataUrl);
                $.event.trigger({
                    type: "imageResized",
                    blob: resizedImage,
                    url: dataUrl
                });
            }
            image.src = readerEvent.target.result;
        }
        reader.readAsDataURL(file);
    }
};

Jak widać, używam canvas.toDataURL('image/jpeg');do zmiany obrazu o zmienionym rozmiarze na dataUrl i wywołuję funkcję, dataURLToBlob(dataUrl);aby przekształcić dataUrl w obiekt blob, który mogę następnie dołączyć do formularza. Po utworzeniu obiektu BLOB wyzwalam zdarzenie niestandardowe. Oto funkcja służąca do tworzenia obiektu blob:

/* Utility function to convert a canvas to a BLOB */
var dataURLToBlob = function(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = parts[1];

        return new Blob([raw], {type: contentType});
    }

    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;

    var uInt8Array = new Uint8Array(rawLength);

    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }

    return new Blob([uInt8Array], {type: contentType});
}
/* End Utility function to convert a canvas to a BLOB      */

Wreszcie, oto moja procedura obsługi zdarzeń, która pobiera obiekt BLOB ze zdarzenia niestandardowego, dołącza formularz, a następnie przesyła go.

/* Handle image resized events */
$(document).on("imageResized", function (event) {
    var data = new FormData($("form[id*='uploadImageForm']")[0]);
    if (event.blob && event.url) {
        data.append('image_data', event.blob);

        $.ajax({
            url: event.url,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(data){
               //handle errors...
            }
        });
    }
});

1
Cudowny kod, po kilku zmianach i naprawieniu błędów (nie pamiętam dokładnie co i które) udało mi się go uruchomić. Swoją drogą, myślę, że kiedy pisałeś width *= max_size / width;, naprawdę miałeś na myśli width *= max_size / height;.
user1111929

2
Czy ten kod działa na urządzeniach mobilnych? W systemie iOS i Android?
planewalker

4
@planewalker Właściwie napisałem kod specjalnie dla urządzeń mobilnych. Aby zmniejszyć zużycie danych.
ferics2

2
@planewalker, kiedy to pisałem, testowałem na iOS. Mam nadzieję, że to działa dla Ciebie.
ferics 2

3
Dobra robota i dzięki za udostępnienie! (Drobny błąd, o którym wspominali inni, ale go nie zidentyfikowali, znajduje się w wyzwalaczu zdarzenia zmiany rozmiaru obrazu. „Url: url” powinno mieć wartość „url: dataUrl”)
Seoras

44

jeśli ktoś jest zainteresowany wykonałem wersję maszynopisu:

interface IResizeImageOptions {
  maxSize: number;
  file: File;
}
const resizeImage = (settings: IResizeImageOptions) => {
  const file = settings.file;
  const maxSize = settings.maxSize;
  const reader = new FileReader();
  const image = new Image();
  const canvas = document.createElement('canvas');
  const dataURItoBlob = (dataURI: string) => {
    const bytes = dataURI.split(',')[0].indexOf('base64') >= 0 ?
        atob(dataURI.split(',')[1]) :
        unescape(dataURI.split(',')[1]);
    const mime = dataURI.split(',')[0].split(':')[1].split(';')[0];
    const max = bytes.length;
    const ia = new Uint8Array(max);
    for (var i = 0; i < max; i++) ia[i] = bytes.charCodeAt(i);
    return new Blob([ia], {type:mime});
  };
  const resize = () => {
    let width = image.width;
    let height = image.height;

    if (width > height) {
        if (width > maxSize) {
            height *= maxSize / width;
            width = maxSize;
        }
    } else {
        if (height > maxSize) {
            width *= maxSize / height;
            height = maxSize;
        }
    }

    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(image, 0, 0, width, height);
    let dataUrl = canvas.toDataURL('image/jpeg');
    return dataURItoBlob(dataUrl);
  };

  return new Promise((ok, no) => {
      if (!file.type.match(/image.*/)) {
        no(new Error("Not an image"));
        return;
      }

      reader.onload = (readerEvent: any) => {
        image.onload = () => ok(resize());
        image.src = readerEvent.target.result;
      };
      reader.readAsDataURL(file);
  })    
};

a oto wynik javascript:

var resizeImage = function (settings) {
    var file = settings.file;
    var maxSize = settings.maxSize;
    var reader = new FileReader();
    var image = new Image();
    var canvas = document.createElement('canvas');
    var dataURItoBlob = function (dataURI) {
        var bytes = dataURI.split(',')[0].indexOf('base64') >= 0 ?
            atob(dataURI.split(',')[1]) :
            unescape(dataURI.split(',')[1]);
        var mime = dataURI.split(',')[0].split(':')[1].split(';')[0];
        var max = bytes.length;
        var ia = new Uint8Array(max);
        for (var i = 0; i < max; i++)
            ia[i] = bytes.charCodeAt(i);
        return new Blob([ia], { type: mime });
    };
    var resize = function () {
        var width = image.width;
        var height = image.height;
        if (width > height) {
            if (width > maxSize) {
                height *= maxSize / width;
                width = maxSize;
            }
        } else {
            if (height > maxSize) {
                width *= maxSize / height;
                height = maxSize;
            }
        }
        canvas.width = width;
        canvas.height = height;
        canvas.getContext('2d').drawImage(image, 0, 0, width, height);
        var dataUrl = canvas.toDataURL('image/jpeg');
        return dataURItoBlob(dataUrl);
    };
    return new Promise(function (ok, no) {
        if (!file.type.match(/image.*/)) {
            no(new Error("Not an image"));
            return;
        }
        reader.onload = function (readerEvent) {
            image.onload = function () { return ok(resize()); };
            image.src = readerEvent.target.result;
        };
        reader.readAsDataURL(file);
    });
};

użycie jest takie:

resizeImage({
    file: $image.files[0],
    maxSize: 500
}).then(function (resizedImage) {
    console.log("upload resized image")
}).catch(function (err) {
    console.error(err);
});

lub ( async/ await):

const config = {
    file: $image.files[0],
    maxSize: 500
};
const resizedImage = await resizeImage(config)
console.log("upload resized image")

Naprawdę fajne rozwiązanie, można dodać dodatkowe ustawienie, aby umożliwić zwrócenie wyniku jako base64 (pomiń wywołanie dataURIToBlob na końcu).
Chen

Otrzymuję ten błąd:Uncaught (in promise) TypeError: Cannot read property 'type' of undefined
Owen M

1
Miły. Musiałem zmienić unescape na (<dowolne> okno) .unescape Dodałem również minSize.
robert king

maxSizejest w bajtach lub kb?
Jagruti

1
Twoja odpowiedź pomogła mi odpowiedzieć na to pytanie , dzięki.
Syed

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.