Hoe Aspose.CAD in Angular te gebruiken

Vereisten

Angular CLI
Visual Code
Node.js

Converteer dgn-beeld naar png en toon in de browser

In dit voorbeeld maak je een eenvoudig conversieprogramma dat een tekening omzet en deze opslaat als een afbeelding.

Het Angular-project aanmaken

Zorg ervoor dat je je nog niet in een Angular-werkruimte directory bevindt.
Start een nieuwe en geef dan de naam van het programma of gebruik andere programma’s om een project te creëren, zoals Visual Code of WebStorm:
```
ng new angular-example
```
Installeer Aspose.CAD vanuit het npm-pakket
```
npm install aspose-cad
```
Open het angular.json bestand en voeg een invoer toe in het scriptveld, dit script begint met laden met het project en is vereist om de bestanden te verwerken
```
"scripts": [
  "node_modules/aspose-cad/dotnet.js"
]
```

In app.component.html, maak een invoertype bestand en img-tags aan om de tekening te laden en weer te geven

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

In app.component.ts beschrijven we het proces van het starten van de hulpprocessen, het verwerken en opslaan van de afbeelding

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";

//moet het dotnet-proces opstarten
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 wordt geladen...");
    await dotnet.boot().then((ex: any) => {
      console.log("aspose-cad WASM is geladen");
    });
  }

  // @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); //Laad afbeelding
      console.log(this.imgFile);
      var exportedFile = await Image.Save(this.imgFile, new PngOptions()); //sla afbeelding op als png

      var urlCreator = window.URL || window.webkitURL;
      var blob = new Blob([exportedFile], { type: 'application/octet-stream' });
      
      //maak src voor geconverteerde afbeelding
      this.imageUrl = this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));

      //download png afbeelding
      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();

    });
  }
}

Start applicatie
```
npm start
//of
ng serve
```
De ng serve-opdracht:
- Bouwt de applicatie
- Start de ontwikkelingsserver
- Bekijkt de bronbestanden
- Herbalen de applicatie terwijl je wijzigingen aanbrengt
De –open vlag opent een browser naar http://localhost:4200.

Voorbeeld van uitvoering

Kies bestand.
Selecteer een DXF-, DWG-, DGN-, DWF-, DWFX-, IFC-, STL-, DWT-, IGES-, PLT-, CF2-, OBJ-, HPGL-, IGS-, PCL-, FBX-, PDF-, SVG-bestand.
Als het antwoord succesvol is, wordt het bestand op het scherm weergegeven en wordt aangeboden om het te downloaden.

Zie ook

Hoe Aspose.CAD te gebruiken in JavaScript