Изменение размера и сжатие изображения в Angular 6 с помощью Web Worker - PullRequest
Новая
       10

Изменение размера и сжатие изображения в Angular 6 с помощью Web Worker

0 голосов
/ 20 сентября 2018

Я не очень знаком с WebWorker.Мне удалось отправить сообщение в JS Script и отправить его обратно на службу.Так что процесс работает правильно.Теперь, когда эта часть работает, я пытаюсь понять, как изменить размер и сжать изображение.

В WebWorker у нас нет доступа к DOM, мы не можем создать документ или холст.Поэтому нам нужно изменить размер изображения по нашему собственному алгоритму.

Мой код:

Интерфейс 

export interface IImageCompressionMessage {
  images: FileList;
}

image -ression.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 -ression.js

ImageBitmap {ширина: 800, высота:> 534} сжатие изображений.js

ImageBitmap {ширина: 800, высота: 576} image -ression.js

ОТЛАДКА: DataLervice DataList Service {0: файл (38880), 1: файл (40565), 2:Файл (41396), длина: 3} webworker.service.ts

FileList {0: файл (38880), 1: файл (40565), 2: файл (41396), длина: 3} my.component.ts

Знаете ли вы алгоритм, который может изменять размеры и сжимать изображения из ImageBitmap?Если мой способ сделать это неэффективен, не могли бы вы предоставить мне другой способ сделать это?

Спасибо за вашу помощь

...