HTML5 Bilder vor dem Hochladen in der Größe anpassen

Question

Hier ist ein Nudelkratzer.

In Anbetracht der Tatsache, dass wir HTML5 lokale Speicherung und xhr v2 und was nicht haben. Ich frage mich, ob jemand ein funktionierendes Beispiel finden konnte oder sogar nur geben mir ein Ja oder Nein für diese Frage:

Ist es möglich, die Größe eines Bildes mit Hilfe des neuen lokalen Speichers (oder was auch immer) vorzugeben, so dass ein Benutzer, der keine Ahnung von der Größenänderung eines Bildes hat, sein 10 MB großes Bild auf meine Website ziehen kann, es mit Hilfe des neuen lokalen Speichers verkleinert und DANN in der kleineren Größe hochlädt.

Ich weiß sehr wohl, dass man das mit Flash, Java-Applets, Active X... machen kann. Die Frage ist, ob man es mit Javascript + Html5 machen kann.

Ich freue mich auf die Antwort zu diesem Thema.

Danke für den Moment.

Answer 1

Typoskript

async resizeImg(file: Blob): Promise<Blob> {
    let img = document.createElement("img");
    img.src = await new Promise<any>(resolve => {
        let reader = new FileReader();
        reader.onload = (e: any) => resolve(e.target.result);
        reader.readAsDataURL(file);
    });
    await new Promise(resolve => img.onload = resolve)
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    let MAX_WIDTH = 1000;
    let MAX_HEIGHT = 1000;
    let width = img.naturalWidth;
    let height = img.naturalHeight;
    if (width > height) {
        if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
        }
    } else {
        if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
        }
    }
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);
    let result = await new Promise<Blob>(resolve => { canvas.toBlob(resolve, 'image/jpeg', 0.95); });
    return result;
}

Answer 2

Die akzeptierte Antwort funktioniert gut, aber die Logik zur Größenänderung ignoriert den Fall, dass das Bild nur in einer der Achsen größer als das Maximum ist (z. B. Höhe > maxHeight aber Breite <= maxWidth).

Ich denke, dass der folgende Code alle Fälle in einer geradlinigen und funktionalen Art und Weise erledigt (ignorieren Sie die typescript type annotations, wenn Sie einfaches Javascript verwenden):

private scaleDownSize(width: number, height: number, maxWidth: number, maxHeight: number): {width: number, height: number} {
    if (width <= maxWidth && height <= maxHeight)
      return { width, height };
    else if (width / maxWidth > height / maxHeight)
      return { width: maxWidth, height: height * maxWidth / width};
    else
      return { width: width * maxHeight / height, height: maxHeight };
  }

Answer 3

fd.append("image", dataurl);

Das wird nicht funktionieren. Auf der PHP-Seite können Sie damit keine Datei speichern.

Verwenden Sie stattdessen diesen Code:

var blobBin = atob(dataurl.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
  array.push(blobBin.charCodeAt(i));
}
var file = new Blob([new Uint8Array(array)], {type: 'image/png', name: "avatar.png"});

fd.append("image", file); // blob file

Answer 4

Die Größenänderung von Bildern in einem Canvas-Element ist im Allgemeinen keine gute Idee, da es die billigste Box-Interpolation verwendet. Das resultierende Bild verliert deutlich an Qualität. Ich empfehle die Verwendung von http://nodeca.github.io/pica/demo/ die stattdessen eine Lanczos-Transformation durchführen kann. Die Demoseite oben zeigt den Unterschied zwischen Canvas- und Lanczos-Ansätzen.

Es verwendet auch Web Worker für die parallele Größenänderung von Bildern. Es gibt auch eine WEBGL-Implementierung.

Es gibt einige Online-Bildbearbeitungsprogramme, die Pica für diese Aufgabe verwenden, z. B. https://myimageresizer.com

Answer 5

Sie können verwenden dropzone.js wenn Sie einen einfachen Upload-Manager mit Funktionen zur Größenänderung vor dem Hochladen verwenden möchten.

Es hat eingebaute Funktionen zur Größenanpassung, aber Sie können auch eigene Funktionen bereitstellen, wenn Sie möchten.