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の機能を追加してください。
クロップ画像
コメント