技術

【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

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

[Angular6] 一つのタグに複数の条件分岐を書く

こんにちは どうしても一つのタグに複数の条件分岐を書きたい時があるかと思います。 …

画像生成マシーン「MakeGirlsMoe」の10連結果

女の子の萌え画像を作ってくれる「MakeGirlsMoe」なるものが作られたよう …

no image

【ionic】$ionic emulate ios で真っ白

どうも、なかたです。 「COTeggのバケツ」というブログを立ち上げました。 こ …

[ionic] アプリ名にハイフンやアンダーバー入ってると困る件

どうも中田です 今日もionicのお話。 スマホアプリ作るときに test-ap …

【ionic】バックボタンの文字だけ消す

どうも中田です。 今回はHTML5ハイブリッド開発でお馴染みのionicについて …