Jak používat Aspose.CAD v Reactu

Předpoklady

Visual Code
Node.js

Převod obrázku dgn na png a zobrazení v prohlížeči

V tomto příkladu vytvoříte jednoduchý program pro převod kresby a její uložení jako obrázku.

Vytvoření React projektu

Ujistěte se, že již nejste ve složce pracovního prostoru React.
Vytvořte nový a poté zadejte název programu nebo použijte jiné programy k vytvoření projektu, například Visual Code nebo WebStorm:
```
npx create-react-app react-example
```
Nainstalujte Aspose.CAD z npm balíčku
```
npm install aspose-cad
```

Vytvořte vstupní typ souboru a značky img pro načtení a zobrazení kresby

<span style="background-color: red">
  <input id="file" type="file"/>
  <img alt="converted" id="image" />
</span>

V souboru App.tsx popisujeme proces spouštění pomocných procesů, zpracování a uložení obrázku

import React from 'react';
import './App.css';
import {boot} from "aspose-cad/dotnet";
import {Image, PngOptions} from "aspose-cad";
function App() {
  return (
    <div className="App">
      <header className="App-header">
          <input id="file" type="file"/>
          <img alt="converted" id="image" />
      </header>
    </div>
  );
}

window.onload = async function () {
  console.log("loading WASM...");
  await boot();
  console.log("loaded WASM");

  // @ts-ignore
    document.querySelector('input').addEventListener('change', function() {
        var reader = new FileReader();
        reader.onload = function() {

          var arrayBuffer = this.result;
          // @ts-ignore
          var array = new Uint8Array(arrayBuffer);

          // LOAD
          var file = Image.load(array);

          // SAVE
          var exportedFilePromise = Image.save(array, new PngOptions());
          exportedFilePromise.then((exportedFile: BlobPart) => {
            console.log(exportedFile);

            var urlCreator = window.URL || window.webkitURL;
            var blob = new Blob([exportedFile], { type: 'application/octet-stream' });
            var imageUrl = urlCreator.createObjectURL(blob);
            // @ts-ignore
            document.querySelector("#image").src = imageUrl;
          });
        }
        // @ts-ignore
        reader.readAsArrayBuffer(this.files[0]);
      },
      false);
};
export default App;

Spusťte aplikaci
```
npm start
```

Příklad provedení

Vyberte soubor.
Vyberte libovolný DXF, DWG, DGN, DWF, DWFX, IFC, STL, DWT, IGES, PLT, CF2, OBJ, HPGL, IGS, PCL, FBX, PDF, SVG soubor.
Pokud odpověď bude úspěšná, soubor bude zobrazen na obrazovce a nabídne možnost jeho stažení.

Viz také

Jak používat Aspose.CAD v TypeScriptu