Angular(Ionic)で画像にお絵描き

by

クリエイターとエンジニアを応援するNP-Systems@個人開発

Angular(Ionic)で画像にお絵描きする最も簡単な方法はプラグインを使うことです.

https://www.npmjs.com/package/ngx-image-drawing

インストール

npm install --save ngx-image-drawing

使い方

モジュールに追加

import { ImageDrawingModule } from 'ngx-image-drawing';

@NgModule({
  imports: [
    ImageDrawingModule
  ],
  declarations: []
})
export class Tab1PageModule {}

あとはHMTLから呼び出せる

<image-drawing
  <div class="upload">
      <input type="file" accept="image/*"
             (change)="fileChangeEvent($event)">
      <img [src]="imgSrc" alt="">
  </div>

  <image-drawing
      [src]="imageUrl"
      outputMimeType="'image/jpeg'"
      outputQuality="0.8"
      (save)="save($event)"
      (cancel)="cancel()">
  </image-drawing>

tsファイルはこれ


    fileChangeEvent(event: any): void {

    //fileが選択されていなければリセット
    if (event.target.files.length === 0) {
      this.file = null;
      this.imgSrc = "";
      return;
    }

    //ファイルの情報をfileとimgSrcに保存
    let reader = new FileReader();
    this.file = event.target.files[0];
    reader.onload = () => {
      this.imgSrc = reader.result;
      this.imageUrl = reader.result;
      //this.cx.drawImage(event.target.files[0], 0, 0, this.width, this.height);

      console.log(this.imgSrc);

    }
    reader.readAsDataURL(this.file);

  }


  save(event: any){
    console.log(event);
    const url = window.URL.createObjectURL(event);
    let title = "Angular_sample_file";
    //this.cx.drawImage(event, 0, 0, this.width, this.height);

    // aタグを作成して無理やりクリック -> ダウンロード機能発火
    let a = document.createElement('a');
    document.body.appendChild(a);
    a.setAttribute('style', 'display: none');
    a.href = url;
    a.download = title;
    a.click();
    window.URL.revokeObjectURL(url);
  }

プラグインを使わない方法

https://medium.com/@tarik.nzl/creating-a-canvas-component-with-free-hand-drawing-with-rxjs-and-angular-61279f577415


About Author: M. Shikishima

@Masaya04997245 会社員をしながら個人でシステム開発をしています.
this is single-default.php
最新記事
同カテゴリの記事 ionic-angular