Pemrosesan Gambar ReactJS - NodeJS

Lihatlah yang berikut ini

1. Sistem angka biner dan sistem angka desimal
2. Halaman Kode : ASCII , Unicode
3. Bit dan byte
4. Format hex
5. File biner
6. Penyangga dan simpul simpul
7. ArrayBuffer dan Uint8Array
8. Filereader

Sistem angka biner dan sistem angka desimal.

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

Halaman Kode: ASCII, Unicode

Bit dan byte

Format hex

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

File biner

Tonton lampiran

Tonton lampiran

ASCII, hex , .

ArrayBuffer dan Uint8Array

Filereader

<input type="file">

Apa berikutnya?

1. Modul ReactJS
   

   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;
   
                  

   
   
2. Modul ExpressJS
   

   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}`));
   
                 

   
   

Total:

• Mengapa kita perlu pengkodean
• Tampilan umum data biner
• Cara yang disarankan untuk mengirim byte
• Objek penyangga
• Objek FileReader
• Implementasi sederhana pada kait