Cropper.jsのテストページ

Cropper.jsは、画像をクリップやリサイズするためのJavaScriptライブラリです。Webサイトに埋め込むには、以下の手順に従ってください。

Cropper.jsのダウンロードとインストール

Cropper.jsをダウンロードしてインストールするか、CDNを利用してプロジェクトに組み込みます。

ダウンロード方法:
GitHubリポジトリ (https://github.com/fengyuanchen/cropperjs) からダウンロードし、cropper.min.js と cropper.min.css をプロジェクトに追加します。

CDN利用方法:
HTMLファイル内に以下のリンクを追加します。

<!-- Cropper.jsのCSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" />

<!-- Cropper.jsのJavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>

HTMLファイルへの追加

HTMLファイルに、以下のコードを追加して画像要素を作成します。

<img id="image" src="your-image-source.jpg" alt="Your image" />

JavaScriptファイルへの追加

JavaScriptファイルに、以下のコードを追加してCropper.jsのインスタンスを作成します。

// イメージ要素の選択
const imageElement = document.getElementById('image');

// Cropper.jsのインスタンスを作成
const cropper = new Cropper(imageElement, {
  aspectRatio: 1, // アスペクト比（1:1の場合）
  crop: function(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});

この例では、アスペクト比を1:1に設定していますが、他のアスペクト比やオプションも設定できます。詳細については、公式ドキュメント (https://github.com/fengyuanchen/cropperjs#options) を参照してください。

以上の手順で、Cropper.jsをWebサイトに埋め込むことができます。あとは、必要に応じて他のCropper.jsの機能を追加してください。

Cropper.jsのテストページ

クロップ画像

コメント