技術

【Angular6】画像を拡大したり、ドラッグ移動をできるようにする

投稿日:

こんにちは

画像を拡大したり、ドラッグ移動したい時は結構あるんじゃないでしょうか?
今回はそれらが簡単にできる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は色々オプションを設定できるので試してみてください。

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

[Rails]updateの時だけvalidationを実行させる

こんにちは アプリを作っていて、create時にはvalidationを実行させ …

no image

【ionic】FBログイン時にSafari認証になってしまう

どうも中田です。 ionicでFacebookログインを実装した時に、 Nati …

no image

RxJSを覚える時に参考にしたサイトまとめ

こんばんは 弊社ではAngularを使用する機会が多いです。 Angularを使 …

[ Ionic ] アプリのビューをiPhoneXのセーフエリアに対応させる

こんにちは。たなかです。 Ionicで開発しているとき、ハマりがちなポイントの一 …

no image

【ionic】Cannot read property ‘startTrackerWithId’ of undefined だとよ

どうも中田です。 GoogleAnalyticsプラグインを導入したのですが、A …