Mon Aug 21 16:05:01 CST 2023 inscode

.inscode

 run = "index.html"
+language = "node"
 
 [env]
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
-npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
\ No newline at end of file
+npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"

binMain.py

+import math
+import js
+import numpy as np
+from PIL import Image
+import base64
+import io
+
+
+def extract_image(image_data, count):
+    # 从数据 URL 中提取编码后的图片内容部分
+    # image_data = image_data.split(',')[1]
+
+    # 将图片内容部分进行 Base64 解码
+    # decoded_image_data = base64.b64decode(image_data)
+
+    # 创建内存中的二进制数据流对象
+    image_stream = io.BytesIO(image_data)
+
+
+    # 使用 PIL 打开二进制数据流对象，得到 PIL 图像对象
+    img = Image.open(image_stream)
+
+    # 获取图片的宽度和高度
+    width, height = img.size
+
+    w_h_radio = width / height
+
+    row_count = math.floor(count / w_h_radio)
+
+    column_count = (count-1) * 3 + 1
+    row_count = (row_count-1) * 3 + 1
+    cell_width = width // column_count
+    cell_height = height // row_count
+    # 存储挖取后的小图片
+    extracted_images = []
+
+    row_num = 0
+    col_num = 0
+    for row in range(row_count):
+        if row % 3 == 0:
+            row_images = []
+            for column in range(column_count):
+                if column % 3 == 0:
+                    # 计算挖取的区域
+                    left = column * cell_width
+                    upper = row * cell_height
+                    right = left + cell_width
+                    lower = upper + cell_height
+
+                    # 挖取图片并存储
+                    extracted_image = np.array(img.crop((left, upper, right, lower)))
+                    row_images.append(extracted_image)
+                col_num += 1
+            row_num += 1
+            # 将一行的小图片存储到二维数组中
+            extracted_images.append(row_images)
+
+    # 创建新的图片对象，用于重新组成图片
+    new_img = Image.new('RGB', (len(extracted_images[0]) * cell_width, len(extracted_images) * cell_height))
+
+    # 按照二维数组的顺序重新组成图片
+    for i, row_images in enumerate(extracted_images):
+        for j, extracted_image in enumerate(row_images):
+            row = i
+            column = j
+
+            # 计算放置的位置
+            left = column * cell_width
+            upper = row * cell_height
+
+            # 将小图片放置到新图片中
+            new_img.paste(Image.fromarray(extracted_image), (left, upper))
+    return new_img
+
+
+
+
+
+def run(image_data):
+    # print(image_data)
+    count = 30
+    def binary_string_to_bytes(binary_string):
+        bytes = bytearray()
+        
+        for char in binary_string:
+            bytes.append(ord(char))
+        
+        return bytes
+    image_stream = io.BytesIO(binary_string_to_bytes(image_data))
+    img = Image.open(image_stream)
+    display(img,target="mpl")
+    # new_image = extract_image(image_data, count)
+    #with open(image_data,"r") as f:
+    #    new_image = f.read()
+#
+     #   display(new_image,target="mpl")
+    fileInput = js.document.getElementById('uploadFile')
+    file = fileInput.files
+    for i in file:
+        print(i.name)
+        print(file.arrayBuffer())
+

index.html

@@ -23,19 +23,50 @@
             console.log(imgName);
 
             const reader = new FileReader();
+            /*
             reader.readAsDataURL(file);
-
+            
             reader.onloadend = function (e) {
                 imgData = e.target.result;
             };
+            */
+            reader.onload = () => {
+                const arrayBuffer = reader.result;
+                const uint8Array = new Uint8Array(arrayBuffer);
+                imgData = uint8Array;
+                imgData = uint8ArrayToBinaryString(imgData);
+            };
+
+            reader.readAsArrayBuffer(file);
+            console.log(file)
+            //const formData = new FormData();
+
+            // 将文件添加到 FormData 中
+            //formData.append('file', file);
+            //console.log(formData.get("file"));
+            //imgData = formData;
+            file.arrayBuffer().then(function(arrayBuffer) {
+                console.log(arrayBuffer)
+            });
         });
 
         function runPython() {
             pyscript.interpreter.globals.get("run")(imgData);
         }
+
+        function uint8ArrayToBinaryString(uint8Array) {
+            let binaryString = '';
+
+            for (let i = 0; i < uint8Array.length; i++) {
+                binaryString += String.fromCharCode(uint8Array[i]);
+            }
+
+            return binaryString;
+        }
     </script>
     <button onclick="runPython()">RUN</button>
-    <py-script src="./main.py"></py-script>
+    <!--<py-script src="./main.py"></py-script>-->
+    <py-script src="./binMain.py"></py-script>
     <py-terminal style="overflow: auto; max-height: 100px;"></py-terminal>
     <div id="mpl"></div>
 </body>