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