web-dev-qa-db-ja.com

angle4での画像アップロードでの画像圧縮

save(event: any, type, image_type) {
  this.uploadImageFlag = true;
   const fileList: FileList = event.target.files;
    if (fileList.length > 0) {
        const file: File = fileList[0]
        this.files.set('files', file, file.name)
        const reader = new FileReader();
        reader.onload = (event: any) => {
        this.url2 = event.target.result;
        this.upload = true;
        }
        reader.readAsDataURL(event.target.files[0]);

    }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<input id="input"  type="file" accept="image/*" style=" width: 180px;" #files (change)="save($event)" />

以下の機能を使用して、画像をアップロードしてバックエンドに送信しています。問題は、画像サイズが非常に大きく、バックエンドに到達するまでに時間がかかることです。画像を圧縮する方法について多くの例を見てきましたが、既存のコードを変更してモジュールを刷新したくないので、誰かがこの関数を変更して画像を圧縮する方法を教えてください。

angularimage-compressionimage-upload
5
Pragya Sharma

私はあなたが必要とするもののためにこのライブラリを作りました： https://www.npmjs.com/package/ngx-image-compress

Read-meページに完全なサンプルがあります。使用方法についてのアイデアが必要な場合は、ここにスニペットがあります。


@Component({...})
export class AppComponent {

  constructor(private imageCompress: NgxImageCompressService) {}

  compressFile() {

    this.imageCompress.uploadFile().then(({image, orientation}) => {

      console.warn('Size before:', this.imageCompress.byteCount(result));

      this.imageCompress.compressFile(image, orientation, 50, 50).then(

        result => console.warn('Size after:', this.imageCompress.byteCount(result));

      );
    });

  }
}
2
David F.

このための多くのサードパーティモジュールがあり、画像の圧縮についてはよくわかりませんが、キャンバスで画像のサイズを変更し、dataURIを使用して同じ画像をエクスポートすることができます

ここで述べたように、あなたは見ることができます ここ これも基本です チュートリアル

0
Hrishikesh Kale

以下のチュートリアルに従って、圧縮の目標を達成してください

https://medium.com/@coolchoudharyvijay/compress-image-and-send-it-to-an-api-in-angular-bc48e6ed3835

0
V_for_Vj