uniappで画像のトリミング効果を実現する方法

uniapp で画像のトリミング効果を実現する方法

今日のソーシャル メディアや電子商取引プラットフォームでは、画像のトリミングが一般的な要件になっています。 uniapp では、サードパーティのプラグインを使用して画像のトリミングを簡単に実装できます。この記事では、プラグインを使用して uniapp で画像のトリミング効果を実現する方法とコード例を紹介します。

1. 準備

プラグインを使用する前に、uniapp プロジェクトが作成され、uni-app プラグインがプロジェクトにインストールされていることを確認する必要があります。

1. コマンド ライン ツールを使用し、プロジェクトのルート ディレクトリを入力し、次のコマンドを入力して uni-app プラグインをインストールします:

npm install uni-app --save

2. pages.json を見つけます。 ## プロジェクト ルート ディレクトリ #File で "pages" ノードを見つけ、このノードの下に画像のトリミングを表示および操作するための新しいページを追加します。例は次のとおりです:

{
  "pages": [
    "pages/index/index",
    "pages/crop/crop"  // 新增的裁剪页面
  ]
}

3. 次に、

index ページのトリミング ページにジャンプするボタンを追加する必要があります。 index.vue ファイルを見つけて、d477f9ce7bf77f53fbcf36bec1b69b7a タグにクリック イベントを追加します。例は次のとおりです:

<template>
  <view>
    <button @click="toCrop">图片裁剪</button>
  </view>
</template>

<script>
export default {
  methods: {
    toCrop() {
      uni.navigateTo({
        url: '/pages/crop/crop'
      });
    }
  }
}
</script>

<style></style>

2. プラグインのインストール

uniappでは、

uViewプラグインを使用して画像のトリミング機能を実現できます。次に、プラグインをインストールして構成する必要があります。

1. コマンド ライン ツールを使用してプロジェクトのルート ディレクトリを入力し、次のコマンドを入力して

uView プラグインをインストールします:

npm install uview-ui --save

2. ## で#pages.json

ファイル内で "pages" ノードを見つけて、関連するページと uView: <pre class='brush:json;toolbar:false;'>{ &quot;pages&quot;: [ &quot;pages/index/index&quot;, &quot;pages/crop/crop&quot; // 注意查看 uView 官方文档，将相关页面和组件添加到 pages 节点中 ] }</pre>3 のコンポーネントを追加します。

main.js

ファイル uView プラグインのスタイル ファイル: <pre class='brush:js;toolbar:false;'>import 'uview-ui/theme/index.scss';</pre> 3. 画像のトリミング効果を実現します

1. トリミング ページを作成します

プロジェクトのルート ディレクトリに

crop

フォルダーを作成し、このフォルダーの下に crop.vue ファイルを作成して、画像のトリミング効果を表示します。 <pre class='brush:html;toolbar:false;'>&lt;template&gt; &lt;view&gt; &lt;u-cropper @crop=&quot;onCrop&quot; @cancel=&quot;onCancel&quot; :aspectRatio=&quot;aspectRatio&quot; :src=&quot;src&quot;&gt;&lt;/u-cropper&gt; &lt;/view&gt; &lt;/template&gt; &lt;script&gt; export default { data() { return { aspectRatio: 1, // 裁剪框的宽高比 src: '' // 原始图片路径 } }, methods: { onCrop(event) { console.log('裁剪完成', event); }, onCancel() { console.log('取消裁剪'); } } } &lt;/script&gt; &lt;style&gt;&lt;/style&gt;</pre>2. 画像トリミング機能を使用する

前の手順で作成した

crop

ページでは、u-cropper コンポーネントを使用して、画像のトリミング機能を実装します。次に、ページにジャンプするときに画像のパスを渡す必要があります。

index.vue

ファイルで、トリミング ページにジャンプするボタンのクリック イベントを見つけて、その中に画像パス パラメーターを渡します。 <pre class='brush:html;toolbar:false;'>&lt;script&gt; export default { methods: { toCrop() { uni.navigateTo({ url: `/pages/crop/crop?src=${encodeURIComponent('图片路径')}` }); } } } &lt;/script&gt;</pre>

crop.vue

ファイルでは、@crop イベントを使用してトリミング完了のコールバックをリッスンし、@cancel コールバックをリッスンするイベント トリミングをキャンセルするコールバック。これら 2 つのコールバックでは、必要に応じて対応する操作を実行できます。 これまでに、uniapp で画像のトリミング効果を実現する作業が完了しました。上記の手順により、uniapp プロジェクトで画像のトリミング機能を自由に使用できるようになります。

この記事がお役に立てば幸いです。ご質問がございましたら、ディスカッションのためにメッセージを残してください。

以上がuniappで画像のトリミング効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。