技術

【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

【ionic】ナビゲーションバーがちらつく

どうも、中田です。 ionicでアプリを作っていて、なんかナビゲーションバーがち …

no image

【AWS】nginx/rails/mysqlをインストール

どうも、中田です。 最近AWSにテストサーバを立ち上げて検証したり、 お客様に一 …

no image

【Rails】deviseを日本語化する

こんばんは railsでログイン機能を作る時にdeviseを使う方は多いのではな …

no image

[Angular]複数のクエリパラメータを設定する

こんばんは angularで複数のクエリパラメータを設定したいと思います。 co …

no image

【Rails】kaminariさんって配列もいけるんですね

どうも中田です。 久しぶりのブログになります。 railsでページングをする場合 …