Jak používat Aspose.CAD v Angularu

Prerekvizity

Angular CLI
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 konverzi kresby a uložení jejího zobrazení.

Vytvoření Angular projektu

Ujistěte se, že nejste již v adresáři Angular workspace.
Vytvořte nový a poté zadejte název programu nebo použijte jiné programy k vytvoření projektu jako Visual Code nebo WebStorm:
```
ng new angular-example
```
Nainstalujte Aspose.CAD z npm balíčku
```
npm install aspose-cad
```
Otevřete soubor angular.json a přidejte položku do pole skript, tento skript se začne načítat spolu s projektem, je nutné pro zpracování souborů
```
"scripts": [
  "node_modules/aspose-cad/dotnet.js"
]
```

V souboru app.component.html vytvořte vstupní typ souboru a značky img pro načtení a zobrazení kresby

<span style="background-color: red">
    <input type="file" class="file-upload" (change)="onFileSelected($event)" />
    <img alt="" id="image" [src]="imageUrl" />
</span>

V souboru app.component.ts popíšeme proces spuštění pomocných procesů, zpracování a uložení obrázku

import {Component} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {Image} from "aspose-cad/commonjs/Core/Image";
import {PngOptions} from "aspose-cad/commonjs/Options/PngOptions";

//je třeba spustit dotnet proces
declare let dotnet: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-example';

  imageUrl: any;
  imgFile: Uint8Array | null | undefined;

  constructor(private sanitizer: DomSanitizer) {
  }

  // @ts-ignore
  async ngOnInit() {
    console.log("aspose-cad WASM se načítá...");
    await dotnet.boot().then((ex: any) => {
      console.log("aspose-cad WASM byl načten");
    });
  }

  // @ts-ignore
  async onFileSelected(event) {

    const file: File = event.target.files[0];
    file.arrayBuffer().then(async buff => {
      let x = new Uint8Array(buff);
      
      this.imgFile = await Image.Load(x); //Načítání obrázku
      console.log(this.imgFile);
      var exportedFile = await Image.Save(this.imgFile, new PngOptions()); //uložení obrázku do png

      var urlCreator = window.URL || window.webkitURL;
      var blob = new Blob([exportedFile], { type: 'application/octet-stream' });
      
      //vytvoření src pro konvertovaný obrázek
      this.imageUrl = this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));

      //stáhnout png obrázek
      let url = window.URL.createObjectURL(blob);
      let a = document.createElement('a');
      document.body.appendChild(a);
      a.setAttribute('style', 'display: none');
      a.href = url;
      a.download = "file.png";
      a.click();
      window.URL.revokeObjectURL(url);
      a.remove();

    });
  }
}

Spusťte aplikaci
```
npm start
//nebo
ng serve
```
Příkaz ng serve:
- Sestaví aplikaci
- Spustí vývojový server
- Sleduje zdrojové soubory
- Při provedení změn znovu vytvoří aplikaci
Pomocí příznaku –open se otevře prohlížeč na adrese http://localhost:4200.

Příklad provedení

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

Viz také

Jak používat Aspose.CAD v JavaScriptu