Question

我有一个angular 7应用程序，并且我使用ngx-dropzone组件上传文件，上传图像后，是否可以将其显示在画布上，然后将其转换为jpeg，然后再发布到服务器上。

我可以将图像发布到服务器上，我的那部分没有问题，只有您在画布上显示它的部分，我不知道该怎么做，因为我对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文件。

如何使用ngx-dropzone组件在画布上显示上载的图像

1 个答案: