چگونه از Aspose.CAD در Vue استفاده کنیم

الزامات اولیه

Vue CLI
Visual Code
Node.js

تبدیل تصویر dgn به png و نمایش در مرورگر

در این مثال، شما یک برنامه تبدیل ساده ایجاد می‌کنید که یک نقاشی را تبدیل کرده و آن را به عنوان یک تصویر ذخیره می‌کند.

ایجاد پروژه Vue

اطمینان حاصل کنید که در یک دایرکتوری فضای کاری Vue نیستید.
یک دایرکتوری جدید شروع کنید و سپس نام برنامه را وارد کنید یا از برنامه‌های دیگر مانند Visual Code یا WebStorm برای ایجاد یک پروژه استفاده کنید:
```
vue create vue-example
```
Aspose.CAD را از بسته npm نصب کنید
```
npm install aspose-cad
```
یک تگ فایل ورودی و تگ img برای بارگذاری و نمایش نقاشی ایجاد کنید
```
<input id="file" type="file">
<img id="image" />
```

در App.vue، ما روند شروع فرایندهای کمکی، پردازش و نمایش تصویر را توصیف می‌کنیم

<script>
import {Drawing, PngOptions} from "aspose-cad";

export default{
  beforeCreate: function () {
    // نیاز به شروع فرایند جمع‌آوری
    let recaptchaScript = document.createElement('script')
    recaptchaScript.setAttribute('src', '/node_modules/aspose-cad/dotnet.js')
    document.head.appendChild(recaptchaScript)

    let dotnet;
  },
  mounted() {
    window.addEventListener('load', this.onWindowLoad)
  },
  methods: {
    async onWindowLoad() {
      
      console.log("در حال بارگذاری WASM...");
      await dotnet.boot();
      console.log("WASM بارگذاری شد");

      document.querySelector('input').addEventListener('change', function() {
            const reader = new FileReader();
            reader.onload = function() {

              let arrayBuffer = this.result;
              let array = new Uint8Array(arrayBuffer);

              // بارگذاری
              let file = Image.load(array);
              console.log(file);

              // ذخیره‌سازی
              let exportedFilePromise = Image.save(array, new PngOptions());
              exportedFilePromise.then(exportedFile => {
                console.log(exportedFile);

                let urlCreator = window.URL || window.webkitURL;
                let blob = new Blob([exportedFile], { type: 'application/octet-stream' });
                let imageUrl = urlCreator.createObjectURL(blob);
                document.querySelector("#image").src = imageUrl;
              });
            }

            reader.readAsArrayBuffer(this.files[0]);
          },
          false);
    },
  },
}
</script>

<template>
  <header>
    <img alt="آرم Vue" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <p>مثال aspose.cad برای Vue.</p>
  </header>

  <main>
    <input id="file" type="file">
    <br/>
    <img id="image" />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}
main{
  text-align: center;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }


  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

اجرای برنامه
```
npm run dev
```

مثال اجرای

فایل را انتخاب کنید.
هر فایل DXF، DWG، DGN، DWF، DWFX، IFC، STL، DWT، IGES، PLT، CF2، OBJ، HPGL، IGS، PCL، FBX، PDF، SVG را انتخاب کنید.
اگر پاسخ موفقیت‌آمیز باشد، فایل روی صفحه نمایش داده شده و پیشنهاد می‌دهد که آن را دانلود کنید.

همچنین ببینید

چگونه از Aspose.CAD در TypeScript استفاده کنیم