H5 verwendet Reaktionskomponenten, um Bilder aufzunehmen und Bilder zum Hochladen auszuwählen

Der Inhalt dieses Artikels befasst sich mit der Verwendung von Reaktionskomponenten zum Aufnehmen von Bildern und zum Auswählen von Bildern zum Hochladen. Ich hoffe, dass er für Sie hilfreich ist.

Vor einiger Zeit wurde das Projekt umstrukturiert und in ein SSR-Projekt umgewandelt, aber die zuvor verwendete Bildauswahl-Upload-Komponente unterstützte SSR (serverseitiges Rendern) nicht. Also habe ich recherchiert und viele Tools gefunden. Aber manche sind zu groß, manche sind umständlich zu bedienen und manche erfüllen nicht die Nutzungsanforderungen. Ich habe beschlossen, selbst eine h5-Komponente zum Hochladen mobiler Bilder zu schreiben. Das Hochladen von Bildern ist eine relativ häufige Anforderung. Die PC-Version ist in Ordnung, die mobile Version ist jedoch nicht besonders einfach. Im Folgenden fassen wir kurz einige Schlüsselthemen des Prozesses zusammen.

Wichtige Punkte

1. Informationen zur Eingabe

Die Auswahlfunktion wird mithilfe des -Tags implementiert. Das Attribut „accept=‘image/*‘, :capture“ bedeutet, dass das Standardgerät des Systems erfasst werden kann, z. B.: Kamera – Kamera – Mikrofon – Aufnahme. Wenn „capture="camera" eingestellt ist, wird die Kamera standardmäßig verwendet. Es besteht das Problem, dass einige Modelle die Kamera nicht aufrufen können, daher werden wir sie hier nicht festlegen. Ermöglicht Mehrfachauswahl sowie eine Rückruffunktion für das onchange-Ereignis. Die endgültige Eingabe sieht wahrscheinlich so aus:

<input type=&#39;file&#39;
    className={classes.picker}
    accept=&#39;image/*&#39;
    multiple
    capture="camera"
    onChange={this.onfileChange} />

Natürlich ist diese Eingabe hässlich. Wir können sie mit dem Auswahlschaltflächenstil überschreiben, den wir benötigen, indem wir „opacity:0“ festlegen und positionieren. Machen Sie es etwas glamouröser.

2. Informationen zur Auswahlvorschaufunktion

Die Möglichkeit, nach der Auswahl eines Bildes eine Vorschau anzuzeigen, ist eine übliche Funktion. Lassen wir hier den Stil beiseite und sprechen wir nur über die Codeimplementierung. In der Rückruffunktion von onchange können wir die ausgewählte Datei über e.target.files abrufen, die Datei kann jedoch nicht auf der Seite angezeigt werden. Die übliche Methode besteht darin, sie mit Reader.readAsDataURL (Datei) in Base64 zu konvertieren und dann anzuzeigen es auf der Seite. Ich verwende hier eine Rasteranzeige mit neun Quadraten und jedes Bild ist eine Leinwand. Angesichts des Problems unterschiedlicher Bildseitenverhältnisse erhalte ich die Base64-Datei zunächst über readAsDataURL(file). Erstellen Sie dann ein Bild, das durch das Seitenverhältnis der Leinwand des Neun-Quadrat-Rasters gezeichnet wird, sodass der Bildinhalt die gesamte Leinwand ohne Verzerrung abdecken kann.

fileToCanvas (file, index) {//文件
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (event) => {
            let image = new Image();
            image.src = event.target.result;
            image.onload = () => {
                let imageCanvas = this['canvas' + index].getContext('2d');
                let canvas = { width: imageCanvas.canvas.scrollWidth * 2, height: imageCanvas.canvas.scrollHeight * 2 };
                let ratio = image.width / image.height;
                let canvasRatio = canvas.width / canvas.height;
                let xStart = 0; let yStart = 0; let renderableWidth; let renderableHeight;
                if (ratio > canvasRatio) { 
                // 横向过大，以高为准，缩放宽度
                    let hRatio = image.height / canvas.height;
                    renderableHeight = image.height;
                    renderableWidth = canvas.width * hRatio;
                    xStart = (image.width - renderableWidth) / 2;
                }
                if (ratio < canvasRatio) { 
                // 横向过小，以宽为准，缩放高度
                    let wRatio = image.width / canvas.width;
                    renderableWidth = image.width;
                    renderableHeight = canvas.height * wRatio;
                    yStart = (image.height - renderableHeight) / 2;
                }
                imageCanvas.drawImage(image, xStart, yStart, renderableWidth, renderableHeight, 0, 0, canvas.width * 2, canvas.height);
            };
        };
    }

3. Erhalten Sie die Erweiterung der hochgeladenen Datei

Beim Aufnehmen von Bildern auf einigen Modellen ist die durch das Onchange-Ereignis erhaltene Datei blob (Xiaomi 6 usw.). Zu diesem Zeitpunkt , manuell über blob.type Erweiterung festlegen.

Ermitteln der Richtung zum Aufnehmen von Bildern mit iOS

Beim Hochladen des iOS-Bildes wird festgestellt, dass die lokale Datei tatsächlich gedreht wurde Das Problem wird hier nicht im Detail erläutert. Wenn Sie interessiert sind, können Sie danach suchen. Wir müssen also die Ausrichtung erkennen und das Bild wieder in die normale Ausrichtung drehen. Zur Orientierung gibt es viele vorgefertigte Bibliotheken, wie zum Beispiel Exif.js. Aber diese Bibliothek ist etwas umfangreich und es scheint sich nicht zu lohnen, sie für diese kleine Anforderung einzuführen. Es gibt viele vorgefertigte Codes zum Ermitteln der Bildrichtung bei Stackoverflow.
Leicht geändert:

getOrientation (file) {
        return new Promise((resolve, reject) => {
            let reader = new FileReader();
            reader.onload = function (e) {
            //e.target.result为base64编码的文件
                let view = new DataView(e.target.result);
                if (view.getUint16(0, false) !== 0xffd8) {
                    return resolve(-2);
                }
                let length = view.byteLength;
                let offset = 2;
                while (offset < length) {
                    let marker = view.getUint16(offset, false);
                    offset += 2;
                    if (marker === 0xffe1) {
                        let tmp = view.getUint32(offset += 2, false);
                        if (tmp !== 0x45786966) {
                            return resolve(-1);
                        }
                        let little = view.getUint16(offset += 6, false) === 0x4949;
                        offset += view.getUint32(offset + 4, little);
                        let tags = view.getUint16(offset, little);
                        offset += 2;
                        for (let i = 0; i < tags; i++) {
                            if (view.getUint16(offset + i * 12, little) === 0x0112) {
                                return resolve(view.getUint16(offset + i * 12 + 8, little));
                            }
                        }
                    } else if ((marker & 0xff00) !== 0xff00) {
                        break;
                    } else {
                        offset += view.getUint16(offset, false);
                    }
                }
                return resolve(-1);
            };

            reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
        });
    }

//Rückgabewert: 1--normal, -2--non-jpg, -1--undefiniert

5.ios Fotorichtungskorrektur

Die normale Bildausrichtung sollte 1 sein, also konvertieren wir die Datei in Canvas und verwenden die Transformationsmethode von Canvas, um die Leinwand als Referenz zu transformieren. Rufen Sie abschließend das Base64-Bild mit der normalen Richtung der Base64-Codierung über canvas.toDataURL('') ab und konvertieren Sie dann das Base64 zum Hochladen in ein Blob 🎜>Bild hochladen, dieser Teil sollte relativ einfach sein. Laden Sie die Datei einfach in Form von FormData hoch. Der obige Code ist nur der Pseudocode einiger Funktionen und nicht die endgültige Implementierung aller Funktionen.

Probieren Sie es aus, wenn Sie können. Am Ende werden Sie feststellen, dass Sie viel gelernt haben, aber die Räder anderer Leute sind immer noch nützlicher.

Das obige ist der detaillierte Inhalt vonH5 verwendet Reaktionskomponenten, um Bilder aufzunehmen und Bilder zum Hochladen auszuwählen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!