技術

【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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

どの端末で見ても、要素を上下左右の中央に配置する!

こんにちは。たなかです。 最近はスマホで表示するWebアプリの開発をさせてもらっ …

[ Ionic ] A problem occurred evaluating project ‘:app’. > Failed to apply plugin [class ‘com.google.gms.googleservices.GoogleServicesPlugin’] > For input string: “+”

こんにちは。たなかです。 相変わらずモバイルアプリ開発やっています。 先日、Io …

no image

ボタンを押した時にEdgeだけ500エラーになる

こんにちは!コーテッグのこやまです。 フロントをAngular、サーバーサイドを …

rails_logo

[Rails] Controllerで表示してるページのパスを判定したい

Controllerで表示してるページのパスを判定して、条件分岐したいと思います …

no image

【Rails】helperからbrタグを含めた文字列を返したい時

こんにちは プライベートではもっぱらRailsを触っています。 触ってからそんな …