promise load blob

4 years ago · 095a684ab1
4 changed files with 64 additions and 21 deletions
--- 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.
--- 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>
  );
 }
--- a/src/components/Render.tsx
+++ 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;
--- 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();
+        });
+    }
 }