👩🏽‍⚕️ 👩🏻‍🏫 📛 ReactJS Bildverarbeitung - NodeJS 👨🏼‍🤝‍👨🏻 😚 👈🏿

Schönen Tag.

Ich verbringe die Nachbesprechung mit Reactjs (Client-Seite) und Nodejs (Server-Seite).

Kürzlich stellte sich in meinem kleinen Projekt die Frage, wie einfach und einfach es ist, Bilder vom Typ Client-Server auszutauschen.

Heute lernen wir, wie man Binärdaten (insbesondere Bilder) vom Client sendet und auf dem Server verarbeitet. Willkommen bei Katze.

Wenn Ihre Webanwendung ein soziales Netzwerk oder ein Messenger oder ähnliches ist, müssen Sie mit Binärdaten arbeiten, in den meisten Fällen handelt es sich um Bildverarbeitung. Dies wird diskutiert.

Um eine allgemeine Vorstellung zu haben, werde ich sie nacheinander interpretieren.

Schauen Sie sich Folgendes an

Binärzahlensystem und Dezimalzahlensystem
Codepage : ASCII , Unicode
Bit und Byte
Hex-Format
Binärdatei
Puffer- und Knoten-Threads
ArrayBuffer und Uint8Array
Filereader

Binärzahlensystem und Dezimalzahlensystem.

Dies ist eine Zahl, die aus zwei Zeichen besteht: Einsen und Nullen.
In einfachen Worten ist es 2 (Basis) hoch n (die Anzahl der Stellen), zum Beispiel hat die Zahl 10001 5 Stellen:

4 Stellen = 1; 2 ^ 4 = 16;
3 stellig = 0;
2 Ziffern = 0;
1 Stelle = 0;
0 Stelle = 1; 2 ^ 0 = 1;

1-wahr - mache eine Berechnung;
0-false - nicht berechnen;

Als Ergebnis erhalten wir 16 + 1 = 17;
Bei der umgekehrten Operation präsentiert der Computer die Daten in binärer Form.

const num = 17; //  
const binNum = num.toString(2); //    
const initNum = parseInt(binNum, 2); //

Das Dezimalzahlensystem ist eine Zahl, die mit 10 Zeichen von 0 bis 9 geschrieben wird. Wir verwenden sie jeden Tag.

Tatsache ist, dass ein Computer von seiner Darstellung von Informationen lebt. Wenn wir in unserer Muttersprache schreiben oder dezimal zählen, ist dies für einen Computer eine binäre Darstellung. Sie fragen: "Was bedeutet binäre Darstellung?". Wie mein Englischlehrer sagte: "Wie Sie es hören, steht es geschrieben." Der Computer präsentiert Dateien, die Text oder anderes enthalten, oder Berechnungen im Binärzahlensystem - dies ist die Binärdarstellung. Die Sprache der Maschine, die Nummer "17" ist - 10001.

Codepage: ASCII, Unicode

Die Frage stellt sich. Es ist klar mit Zahlen, aber was ist mit dem Text? Wie konvertiert die Maschine Text in Binärdaten? Alles ist einfach. Dazu gibt es Codierungen wie ASCII oder Unicode. Dies ist eine einfache Tabelle ( Codepage ), in der eine Zuordnung zu unserer Zeichennummer erfolgt. Beispiel: Das Zeichen "S" ist die Nummer 53 gemäß der ASCII-Tabelle. Der Computer präsentiert die Nummer 53 in binärer Form - 110101.
In Bezug auf Unicode ist dies ein leistungsstarker Standard, der Folgendes enthält UTF-8-Codierung, die in Webspace- und Unix-ähnlichen Systemen sehr gefragt ist. Das Funktionsprinzip ist allgemein.

Bit und Byte

Ein Bit ist eine Maßeinheit für Informationen durch einen Computer. Und wir wissen bereits, wie ein Computer Informationen darstellt. Ja! Sie haben Recht. Ein Bit ist 1 oder 0. Für einen Computer ist 1 oder 0 so etwas wie ein Transistor, wahr oder falsch. Jetzt ist es überhaupt nicht schwer zu verstehen, was ein Byte ist - es sind 8 Bits, es wird auch als Oktett bezeichnet (der Typ besteht aus 8).

Hex-Format

Wir gehen zum Hex-Format über. Wir haben über das Binärzahlensystem gesprochen, das Dezimalsystem, unter anderem gibt es ein Hexadezimalzahlensystem, Codierer werden verstehen, was ich meine. Dies ist eine Zahl, die mit 16 Zeichen von 0 bis 9 und von af geschrieben wird. Es stellt sich die Frage: "Warum ist es so kompliziert?". Da die Speichereinheit ein 8-Bit-Byte ist, ist es dennoch bequemer, ihren Wert in zwei hexadezimalen Ziffern zu schreiben. Im Unicode-Standard wird die Zeichennummer normalerweise in hexadezimaler Form mit mindestens 4 Ziffern geschrieben.
Dieses Format funktioniert wie folgt: Im Fall eines 8-Bit-Bytes werden 8 Bits nach Geschlecht geteilt, dh 10101011 - 1010 | 1011, nachdem jedes Teil entsprechend konvertiert wurde. 1010-a, 1011-b;

const num = 196; //  
const hexNum = num.toString(16); //   hex 
const initNum = parseInt(hexNum, 16); //     -

Binärdatei

Wir fahren mit dem nächsten Element fort, es wird auch als Binärdatei bezeichnet - es ist ein Array von Bytes. Warum ist binär? Bytes bestehen aus Bits, dh Zeichen eines Binärzahlensystems, daher ist der Name binär. Absolut alle Dateien passen in die Kategorie der Binärdateien, dh Dateien, die Text und Bilder enthalten - all dies sind Binärdateien, also Binärdaten, also Binärdaten.

Häufig werden Binärdaten von ASCII-Codepage-Zeichen sowie im Hex-Format ausgegeben, insbesondere von Bildern. Ich werde ein Beispiel geben. Wir haben folgendes Bild:

Anhang beobachten

Seine teilweise Visualisierung wird als Hex-Agent-Smith dargestellt

Anhang beobachten

ASCII, hex , .

ArrayBuffer und Uint8Array

ArrayBuffer - Objekt zum Arbeiten mit Binärdaten in Javascript. Korrigiert die Speicherlänge für die Arbeit mit der Binärdatei. Beispiel: new ArrayBuffer (256) - Erstellt ein Array-ähnliches Objekt mit einer Größe von 256 Byte, nicht mehr - nicht weniger. Jedes Byte enthält spezifische Informationen. ArrayBuffer ist kein Array und die Array-Methoden sind nicht darauf anwendbar. Sie stellen eine Frage, wie man es benutzt? Ein Uint8Array- Objekt gibt eine ArrayBuffer- Darstellung in einer vorzeichenlosen 8-Bit-Zahl an, dh von 0 bis 255.

Filereader

FileReader ? Dies ist der Konstruktor zum Erstellen der folgenden Elemente:

<input type="file">

Was weiter?

Betrachten Sie nun ein gutes Beispiel , das die Bildverarbeitung demonstriert:

ReactJS-Modul

import React, {useState, useRef, useCallback} from 'react';
import axios from 'axios';

export const UPLOAD_AVATAR = 'http://localhost:8080/api/upload_avatar';

function App() {
  //   ref   FileReader
  const fileRef = useRef(null);
  const [ loading, setLoading ] = useState(false);

  const handleSubmit = useCallback( event => {
    event.preventDefault();

    const fetchData = async (uint8Array) => {
      try {
        const response = await axios({
          method: 'post',
          url: UPLOAD_AVATAR,
          data: [...uint8Array] //    JSON,   
        });

        setLoading(false);
        console.log(response);
      } catch (e) {
        console.error(e.message, 'function handleSubmit')
      }
    };

    if(!fileRef.current) return void null;

    const reader = new FileReader();
    reader.onloadend = () => {
      const uint8Array = new Uint8Array(reader.result);
      setLoading(true);
      fetchData(uint8Array);
    };


    //  
    reader.readAsArrayBuffer(fileRef.current[0]);

    //  reader.readAsBinaryString(fileRef.current[0]) 
    //  MDN,
    //      File API specification, 
    //    
    //  ,     
    //  readAsArrayBuffer
    // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsBinaryString
  }, []);

  const nodeDom = (
    <form onSubmit={handleSubmit}>
      <div>
        <input
          onChange={e => fileRef.current = e.target.files}
          accept="image/*"
          type="file"
          id="button-file"
        />
      </div>
      <button type="submit">{loading ? '...' : ''}</button>
    </form>
  );

  return nodeDom
}

export default App;

ExpressJS-Modul

const express = require("express");
const cors = require("cors");

const crypto = require('crypto');
const fs = require('fs');

const PORT = 8080;

const app = express();

app.use(express.static("public"));
app.use(express.json({ limit: "50mb" }));
app.use(cors());

app.post("/api/upload_avatar", (req, res) => {
  console.log(req.body);
  const randomString = crypto.randomBytes(5).toString('hex');
  const stream = fs.createWriteStream(`./public/images/${randomString}.png`);

  stream.on('finish', function () {
    console.log('file has been written');
    res.end('file has been written');
  });

  stream.write(Buffer.from(req.body), 'utf-8');
  stream.end();
});

app.listen(PORT, () => console.log(`Server running at ${PORT}`));

Gesamt:

Warum brauchen wir Kodierungen?
Gesamtansicht der Binärdaten
Empfohlene Methode zum Senden von Bytes
Pufferobjekt
FileReader-Objekt
Einfache Implementierung an Haken

ReactJS Bildverarbeitung - NodeJS