Question

我对WebWorker并不是很熟悉。我成功地将消息发布到JS脚本，然后将其发送回我的服务。因此，该过程正常工作。既然这部分工作了，我将尝试了解如何调整图像的大小和压缩。

在WebWorker中，我们无法访问DOM，无法创建文档或画布。因此，我们需要通过自己的算法来调整图像的大小。

我的代码：

接口

export interface IImageCompressionMessage {
  images: FileList;
}

image-compression.js

onmessage = async function (e) {
  console.log("[WebWorker] - Message received", e);
  let images = e.data.images;
  let canvas = e.data.canvas;
  try {    
    for (var i = 0; i < images.length; i++) {
      let image = await self.createImageBitmap(images[i]);
      console.log(image);
    }
  } catch (e) {
    console.error(e);
  }

  postMessage({
    result: images
  });
};

webworker.service.ts

export class WorkerService {

  compressionWorker: any;

  searchResultEvent: EventEmitter<any> = new EventEmitter();

  constructor() {
    this.init('/assets/scripts/image-compression.js');
    this.onmessage();
  }

  postMessage(data: IImageCompressionMessage): void {
    this.compressionWorker.postMessage(data);
  }

  init(fileUrl: string): void {
    if (!Worker) {
      this.compressionWorker = new PseudoWorker(fileUrl);
    } else {
      this.compressionWorker = new Worker(fileUrl);
    }
  }

  onmessage(): void {
    this.compressionWorker.onmessage = function (data: any) {
      let result = data.data.result;
      console.log('DEBUG: Data WorkerService', result);
      this.searchResultEvent.next(result)
    }.bind(this);
  }

  terminate(): void {
    this.compressionWorker.terminate();
  }
}

my.component.html

<input style="display: none"
         type="file"
         (change)="onFileChanged($event)"
         [multiple]="allowMultiple"
         [accept]="accept"
         #fileInput>
  <button (click)="fileInput.click()"
          (keyup.enter)="fileInput.click()"
          mat-raised-button
          color="primary"
          type="button">
    <mat-icon>insert_photo</mat-icon>
    ADD IMAGE(S)
  </button>

my.component.ts

 constructor(
    private workerService: WorkerService,
  ) { }

  ngOnInit() {
    this.workerService.searchResultEvent.subscribe(function (data) {
      console.log(data);
    }.bind(this));
  }
  public async onFileChanged(event) {
    console.log('onFileChanged', event);    
    this.workerService.postMessage(
      <IImageCompressionMessage>{
        images: event.target.files,
      }
    );
  }

这是我的控制台日志结果的一部分：

ImageBitmap {宽度：800，高度：442} image-compression.js

ImageBitmap {宽度：800，高度：> 534} image-compression.js

ImageBitmap {宽：800，高：576} image-compression.js

调试：Data WorkerService文件列表{0：File（38880），1：File（40565），2：File（41396），长度：3} webworker.service.ts

FileList {0：文件（38880），1：文件（40565），2：文件（41396），长度：3} my.component.ts

您知道一种可以调整ImageBitmap中图像的大小并对其进行压缩的算法吗？如果我的处理方式效率不高，您可以提供其他方法吗？

感谢您的帮助

使用Web Worker在Angular 6中调整图像大小并压缩

0 个答案: