معالجة صور ReactJS - NodeJS

نلقي نظرة على ما يلي

1. نظام الأرقام الثنائية ونظام الأرقام العشرية
2. صفحة الرموز : ASCII ، Unicode
3. بت و بايت
4. تنسيق سداسي عشري
5. ملف ثنائي
6. خيوط العازلة و nodejs
7. ArrayBuffer و Uint8Array
8. مترجم

نظام الأرقام الثنائية ونظام الأرقام العشرية.

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

صفحة الرموز: ASCII ، Unicode

بت والبايت

تنسيق سداسي عشري

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

ملف ثنائي

مشاهدة المرفق

مشاهدة المرفق

ASCII, hex , .

ArrayBuffer و Uint8Array

مترجم

<input type="file">

ماذا بعد؟

1. وحدة 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. وحدة 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}`));
   
                 

   
   

مجموع:

• لماذا نحتاج إلى ترميزات
• نظرة عامة على البيانات الثنائية
• الطريقة الموصى بها لإرسال وحدات البايت
• كائن عازلة
• كائن FileReader
• تنفيذ بسيط على الخطافات