1
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
