如何使用 ngx-dropzone 組件在 canvas 上顯示上傳的圖像

Question

我有一個 angular 7 應用程序，我使用 ngx-dropzone 組件上傳文件，有沒有辦法在上傳后在 canvas 上顯示圖像，然后在將其發布到服務器之前將其轉換為 jpeg。

我可以將圖像發布到服務器我對該部分沒有問題，只有在 canvas 上顯示它的部分我不知道如何執行此操作，因為我對這個 ngx-dropzone 組件相對較新。

html代碼

<div class="clr-row">
  <div class="clr-col-4">
    <canvas #canvas width=40 height=40 ></canvas>
  </div>
  <div class="clr-col-4 text-center">
    <ngx-dropzone  #dropzone (change)="upload($event)" class="custom-dropzone" >
      <ngx-dropzone-label>CLICK OR DROP FILES HERE TO UPLOAD</ngx-dropzone-label>
    </ngx-dropzone>

  </div>
  <div class="clr-col-4">
    <button class="btn btn-success" (click)="Submit()">Submit Files</button>
  </div>
</div>

code that i use to post the data to the back end

  Submit() {
    const formData: FormData = new FormData();
    this.files.forEach((el) => {
      formData.append(el.name, el);
    });
    this.files.forEach((el) => {
      console.log(formData.get(el.name));
    });
    console.log(formData);
    this._appService.UploadFileService.SendFiles(formData);
  }

  upload(event) {

    console.log(event);

    event.addedFiles.forEach((el) => {

      this.files.push(el);

    });


  }


thanks in advance.

Answer 1

我找到了使用 tiff.js 庫的解決方案，

下面是我用來顯示上傳的 tiff 圖像並將其轉換為 jpeg 的代碼，然后再將其發送到服務器

我在我的組件中導入了 tiff.js 庫

import * as Tiff from 'tiff.js';

        let filereader = new FileReader();
        let canvasEl = document.getElementById("canvas")  as HTMLCanvasElement;
        let cx = canvasEl.getContext('2d')!;
        let url: string;
        filereader.onload = (e) => {
          let tiff = new Tiff({ buffer: filereader.result });
          let ff = tiff.countDirectory();
          if (ff > 1) {
            for (var i = 0; i < ff; i++) {
              tiff.setDirectory(i);
              canvasEl = tiff.toCanvas();
              url = canvasEl.toDataURL('image/jpeg', 0.7);
              const imagefile = this.GetBlob(url);
              const newFile = new File([imagefile], i.toString() + "_" + el.name.replace('.TIF', '.jpeg').replace('.tiff', '.jpeg').replace('.tif', '.jpeg'), { type: 'image/jpeg' });
              this.files.push(newFile);
              let jpfile = this.files[this.files.length - 1];
              let reader = new FileReader();
              reader.onload = (e) => {
                let c = document.getElementById(jpfile.name) as HTMLImageElement;
                c.src = reader.result as string;
              }
              reader.readAsDataURL(jpfile)
            }
          } else {
            canvasEl = tiff.toCanvas();
            url = canvasEl.toDataURL('image/jpeg', 0.7);
            const imagefile = this.GetBlob(url);
            const newFile = new File([imagefile], el.name.replace('.TIF', '.jpeg').replace('.tiff', '.jpeg'), { type: 'image/jpeg' });
            this.files.push(newFile);

            let jpfile = this.files[this.files.length - 1];
            let reader = new FileReader();
            reader.onload = (e) => {
              let c = document.getElementById(jpfile.name) as HTMLImageElement;
              c.src = reader.result as string;
            }
            reader.readAsDataURL(jpfile)
          }


        }
        filereader.readAsArrayBuffer(el);

上面的代碼也適用於包含多個頁面的 tiff 文件。