uniappで画像のトリミングとフレーム選択を実装する方法-uni-app-php.cn

uniappで画像のトリミングとフレーム選択を実装する方法

WBOY

リリース： 2023-07-07 10:04:36

オリジナル

1748 人が閲覧しました

Uniapp で画像のトリミングとフレーム選択を実装する方法

はじめに

画像のトリミングは、モバイルアプリケーション開発における一般的な要件の 1 つです。 Uniapp では、いくつかのプラグインを使用するか、カスタムコードを作成して、画像のトリミングとフレーム選択機能を実装できます。この記事では、uni-cropper プラグインを使用して画像のトリミングとフレーム選択を実装する方法を紹介し、関連するコード例を示します。

手順

1. uni-cropper プラグインをインストールします

まず、Uniapp プロジェクトに uni-cropper プラグインをインストールします。 npm を介してインストールし、コマンドラインツールを開き、プロジェクトディレクトリに入り、次のコマンドを実行します。

npm install uni-cropper

ログイン後にコピー

インストールが完了したら、uni-cropper プラグインの使用をpages.json ファイルページ。画像をトリミングする必要があるページを見つけて、pages.json ファイルに次の構成を追加します:

"pages": [
  {
    "path": "pages/cropper/index",
    "style": {
      "navigationBarTitleText": "图片裁剪"
    }
  }
]

ログイン後にコピー

2。ページ

で uni-cropper コンポーネントを使用します。

必要な場合画像のトリミングを使用するページに、uni-cropper コンポーネントを追加します。ページの template に次のコードを追加します:

<template>
  <view>
    <uni-cropper :src="imageSrc" @complete="handleCrop" :disable-scale="true" :disable-rotate="true"></uni-cropper>
    <button @tap="selectImage">选择图片</button>
  </view>
</template>

ログイン後にコピー

data の imageSrc 変数を定義して、選択した画像パスを保存します:

data() {
  return {
    imageSrc: ''
  };
},

ログイン後にコピー

uni-cropper コンポーネントの src 属性は、トリミングされる画像のパスを表す imageSrc にバインドされます。 @complete イベントは、トリミングが完了した後にイベントをリッスンし、handleCrop メソッドを実行します。

3. 画像選択機能の実装

ページの methods に selectImage を追加します。メソッド:

methods: {
  selectImage() {
    uni.chooseImage({
      count: 1,
      success: (res) => {
        this.imageSrc = res.tempFilePaths[0];
      }
    });
  },
  handleCrop(res) {
    console.log(res);
  }
}

ログイン後にコピー

selectImage このメソッドは、uni.chooseImage API を使用して画像を選択し、選択した画像のパスを imageSrc に割り当てます。 handleCrop このメソッドは、トリミングの完了後にイベントを処理するために使用され、トリミングされた情報をコンソールに出力できます。