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

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); }