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" // 新增的裁剪页面
]
}index ページのトリミング ページにジャンプするボタンを追加する必要があります。 index.vue ファイルを見つけて、 タグにクリック イベントを追加します。例は次のとおりです: <template>
<view>
<button @click="toCrop">图片裁剪</button>
</view>
</template>
<script>
export default {
methods: {
toCrop() {
uni.navigateTo({
url: '/pages/crop/crop'
});
}
}
}
</script>
<style></style>
uViewプラグインを使用して画像のトリミング機能を実現できます。次に、プラグインをインストールして構成する必要があります。
uView プラグインをインストールします:
npm install uview-ui --save
ファイル内で "pages" ノードを見つけて、関連するページと uView: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:json;toolbar:false;'>{
"pages": [
"pages/index/index",
"pages/crop/crop"
// 注意查看 uView 官方文档，将相关页面和组件添加到 pages 节点中
]
}</pre><div class="contentsignin">ログイン後にコピー</div></div>3 のコンポーネントを追加します。
ファイル uView プラグインのスタイル ファイル: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:js;toolbar:false;'>import 'uview-ui/theme/index.scss';</pre><div class="contentsignin">ログイン後にコピー</div></div> 3. 画像のトリミング効果を実現します
1. トリミング ページを作成します
プロジェクトのルート ディレクトリに
crop フォルダーを作成し、このフォルダーの下に crop.vue ファイルを作成して、画像のトリミング効果を表示します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><template>
<view>
<u-cropper @crop="onCrop" @cancel="onCancel" :aspectRatio="aspectRatio" :src="src"></u-cropper>
</view>
</template>
<script>
export default {
data() {
return {
aspectRatio: 1, // 裁剪框的宽高比
src: '' // 原始图片路径
}
},
methods: {
onCrop(event) {
console.log('裁剪完成', event);
},
onCancel() {
console.log('取消裁剪');
}
}
}
</script>
<style></style></pre><div class="contentsignin">ログイン後にコピー</div></div>2. 画像トリミング機能を使用する
前の手順で作成した
crop ページでは、u-cropper コンポーネントを使用して、画像のトリミング機能を実装します。次に、ページにジャンプするときに画像のパスを渡す必要があります。
ファイルで、トリミング ページにジャンプするボタンのクリック イベントを見つけて、その中に画像パス パラメーターを渡します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><script>
export default {
methods: {
toCrop() {
uni.navigateTo({
url: `/pages/crop/crop?src=${encodeURIComponent('图片路径')}`
});
}
}
}
</script></pre><div class="contentsignin">ログイン後にコピー</div></div>crop.vue<p> ファイルでは、<code>@crop イベントを使用してトリミング完了のコールバックをリッスンし、@cancel コールバックをリッスンするイベント トリミングをキャンセルするコールバック。これら 2 つのコールバックでは、必要に応じて対応する操作を実行できます。 これまでに、uniapp で画像のトリミング効果を実現する作業が完了しました。上記の手順により、uniapp プロジェクトで画像のトリミング機能を自由に使用できるようになります。
この記事がお役に立てば幸いです。ご質問がございましたら、ディスカッションのためにメッセージを残してください。
以上がuniappで画像のトリミング効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
