From 095a684ab16dc9634ad29b3e12213238136c81c6 Mon Sep 17 00:00:00 2001
From: Blobt <380255922@qq.com>
Date: Sat, 26 Jun 2021 15:55:24 +0800
Subject: [PATCH] promise load blob

---
 public/index.html                  |  1 -
 src/App.tsx                        | 21 ++-------------
 src/components/Render.tsx          | 41 ++++++++++++++++++++++++++++++
 src/renderi/commons/HttpRequest.ts | 22 +++++++++++++++-
 4 files changed, 64 insertions(+), 21 deletions(-)
 create mode 100644 src/components/Render.tsx
diff --git a/public/index.html b/public/index.html
index 2af390d2..aa069f27 100755
--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,6 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <canvas id="render" width="800" height="600" style="background: lightgray"> </canvas>
     <div id="root"></div>
     <!--
       This HTML file is a template.
diff --git a/src/App.tsx b/src/App.tsx
index 8ba8aa90..5f5507ca 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,28 +1,11 @@
 import React from 'react';
 import './App.css';
-import { AsyncLoadTestApplication } from "./renderi/lib/AsyncLoadTestApplication";
-
-let canvas: HTMLCanvasElement | null = document.getElementById('render') as HTMLCanvasElement;
-let app: AsyncLoadTestApplication = new AsyncLoadTestApplication(canvas);
-//app.run();
-
-let p: Promise<string> = new Promise((resolve, rejected) => {
-  resolve("ok");
-});
-
-p.then((value) => {
-  console.log(value);
-}).then(() =>{
-  console.log("ending");
-});
-
-console.log("runing");
-
-//console.log(p);
+import Render from "./components/Render";
 
 function App() {
   return (
     <div className="App">
+      <Render name="test"></Render>
     </div>
   );
 }
diff --git a/src/components/Render.tsx b/src/components/Render.tsx
new file mode 100644
index 00000000..6e4551ca
--- /dev/null
+++ b/src/components/Render.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { HttpRequest } from "../renderi/commons/HttpRequest";
+
+interface RenderProps {
+    name: string
+}
+
+class Render extends React.Component<RenderProps> {
+
+    //eslint-disable-next-line
+    constructor(prop) {
+        super(prop);
+    }
+
+    componentDidMount() {
+        let canvas: HTMLCanvasElement | null = document.getElementById('render') as HTMLCanvasElement;
+        console.log(canvas)
+
+        let ret = HttpRequest.loadImg("https://3dresource.aihomee.com/uploads/image/2021-04-09/original/202104091701593415.jpg");
+
+        ret.then((data) => {
+            let path:string = URL.createObjectURL(data);
+            document.querySelector('#ig')?.setAttribute("src",path);
+        });
+
+    }
+
+    render() {
+        return <>
+            <div>
+                {this.props.name}
+                <canvas id="render" width="800" height="600" style={{ backgroundColor: 'lightgray' }}> </canvas>
+                <img src="" alt="test" id="ig" />
+            </div>
+        </>;
+    }
+}
+
+//lightgray
+
+export default Render;
\ No newline at end of file
diff --git a/src/renderi/commons/HttpRequest.ts b/src/renderi/commons/HttpRequest.ts
index 8f06bb4e..6966906a 100755
--- a/src/renderi/commons/HttpRequest.ts
+++ b/src/renderi/commons/HttpRequest.ts
@@ -1,4 +1,5 @@
 import { rejects } from "node:assert";
+import { resolve } from "node:dns";
 import { ImageInfo } from "../core/ImageInfo";
 
 export class HttpRequest {
@@ -67,7 +68,7 @@ export class HttpRequest {
             let xhr: XMLHttpRequest = new XMLHttpRequest();
             xhr.responseType = "arraybuffer";
             xhr.onreadystatechange = (ev: Event): any => {
-                if (xhr.readyState === 4 && xhr.status === 2000) {
+                if (xhr.readyState === 4 && xhr.status === 200) {
                     resolve(xhr.response as ArrayBuffer);
                 }
             }
@@ -75,4 +76,23 @@ export class HttpRequest {
             xhr.send();
         });
     }
+
+    /**
+     * 
+     * @param url 
+     * @returns 
+     */
+    public static loadImg(url: string): Promise<Blob>{
+        return new Promise((resolve, reject) => {
+                let xhr: XMLHttpRequest = new XMLHttpRequest();
+                xhr.responseType = "blob";
+                xhr.onreadystatechange = (e: Event): any => {
+                        if(xhr.readyState === 4 && xhr.status === 200){
+                            resolve(xhr.response);
+                        }
+                }
+                xhr.open('GET', url);
+                xhr.send();
+        });
+    }
 }
\ No newline at end of file
