こんにちは
画像を拡大したり、ドラッグ移動したい時は結構あるんじゃないでしょうか?
今回はそれらが簡単にできるViewer.jsをAngular6に導入してみます。
こんなことが出来るようになります。
デモ
ソースはこちらから
github
使い方は簡単です。
先ず、パッケージをインストールします。
$ npm install viewerjs
型ファイルを入れる必要があるなら下記を実行してください
$ npm install @types/viewerjs
Viewer.jsで使用するcssをAngularに読み込ませないと行けないので、.angular-cli.jsonに下記を記述します。
"styles": [ "../node_modules/viewerjs/dist/viewer.min.css" ]
index.component.htmlを用意
<div class="image-area"> <img src="test.jpg"> </div>
index.component.tsを用意
import Viewer from 'viewerjs'; public ngOnInit(): void { this.createOperatingFile(); } private createOperatingFile() { const img = this.elementRef.nativeElement.querySelector('.image-area > img') as HTMLElement; this.viewer = new Viewer(img, { inline: true }); }
これで完成です。
Viewer.jsは色々オプションを設定できるので試してみてください。