ReactJS इमेज प्रोसेसिंग - NodeJS

निम्नलिखित पर एक नज़र डालें

1. बाइनरी नंबर सिस्टम और दशमलव संख्या प्रणाली
2. कोड पेज : ASCII , यूनिकोड
3. बिट और बाइट
4. हेक्स स्वरूप
5. बाइनरी फ़ाइल
6. बफर और नोडज थ्रेड्स
7. ArrayBuffer और Uint8Array
8. FileReader

बाइनरी नंबर सिस्टम और दशमलव संख्या प्रणाली।

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

कोड पेज: ASCII, यूनिकोड

बिट और बाइट

हेक्स स्वरूप

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

बाइनरी फ़ाइल

लगाव देखो

लगाव देखो

ASCII, hex , .

ArrayBuffer और Uint8Array

FileReader

<input type="file">

आगे क्या होगा?

1. रिएक्टजस मॉड्यूल
   

   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. एक्सप्रेसजेएस मॉड्यूल
   

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

   
   

संपूर्ण:

• हमें एन्कोडिंग की आवश्यकता क्यों है
• बाइनरी डेटा का सामान्य दृश्य
• बाइट भेजने का अनुशंसित तरीका
• बफर वस्तु
• FileReader ऑब्जेक्ट
• हुक पर सरल कार्यान्वयन