VUE3 入門例: 単純な画像クロッパーの作成

Vue.js は、人気のある JavaScript フロントエンド フレームワークです。最新バージョンの Vue3 がリリースされました。Vue の新バージョンは、パフォーマンス、サイズ、開発エクスペリエンスが向上しており、ますます多くの開発者に歓迎されています。この記事では、Vue3を使って簡単な画像クロッパーを作成する方法を紹介します。

まず、Vue プロジェクトを作成し、必要なプラグインをインストールする必要があります。 Vue CLI を使用してプロジェクトを作成することも、手動でビルドすることもできます。ここでは例として Vue CLI の使用を取り上げます。

# 安装Vue CLI
npm install -g @vue/cli

# 创建Vue项目
vue create image-cropper

# 进入项目文件夹
cd image-cropper

# 安装所需插件
npm install vue-cropperjs --save
npm install cropperjs --save

Vue-Cropperjs は画像をトリミングするためのプラグインであり、Cropperjs は Vue-Cropperjs のコア ライブラリであり、一緒にインストールする必要があります。

次に、Vue-Cropperjs プラグインを Vue プロジェクトに導入する必要があります。 src/main.js ファイルを次のように変更します。

import Vue from 'vue'
import App from './App.vue'
import VueCropper from 'vue-cropperjs'

import 'cropperjs/dist/cropper.css'

Vue.use(VueCropper)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

上記のコードでは、Vue-Cropperjs プラグインを導入し、Vue の Vue.use() メソッドを呼び出しました。登録する。ここでは、画像クロッパーが正常に動作するように Cropperjs のスタイル ファイルも導入していることに注意してください。

次に、Vue で画像クロッパー コンポーネントを作成する必要があります。 src/views ディレクトリに新しい CropImage.vue ファイルを作成し、次のコードを追加します。

<template>
  <div>
    <div ref="wrapper">
      <img ref="img" :src="src" style="max-width: 100%;" />
    </div>
    <div>
      <input type="file" @change="onUpload" />
    </div>
    <div>
      <vue-cropper ref="cropper" :src="src" :auto-crop-area="0.5" :guides="false" :view-mode="1" :drag-mode="dragMode" :crop-box-movable="false" :crop-box-resizable="false" :crop-box-border-radius="50"></vue-cropper>
    </div>
    <div>
      <button @click="onCrop">裁剪</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CropImage',
  data() {
    return {
      src: '',
      cropper: null,
      dragMode: 'move'
    }
  },
  methods: {
    onUpload(e) {
      const file = e.target.files[0]
      if (file.type.match(/image.*/)) {
        const reader = new FileReader()
        reader.onload = (event) => {
          this.src = event.target.result
        }
        reader.readAsDataURL(file)
      }
    },
    onCrop() {
      const canvas = this.$refs.cropper.getCroppedCanvas({ width: 100, height: 100 })
      const dataUrl = canvas.toDataURL()
      console.log(dataUrl)
    }
  }
}
</script>

上記のコードでは、## という名前のファイルを作成しました。 #CropImage Vue コンポーネントには 3 つの主要要素が含まれます:

画像コンテナ
画像アップロード ボタン
画像クロッパー

img タグと div タグを使用して、初期イメージ コンテナーを作成します。ユーザーは「アップロード」ボタンをクリックして、トリミングする画像を選択できます。ユーザーが画像を選択すると、FileReader を使用して画像を Base64 エンコードに変換し、それを src 属性に割り当てて画像をプレビューします。

画像クロッパーは、Vue-Cropperjs プラグインで提供される

vue-cropper タグを使用します。このタグは、クロッパーのパフォーマンスを制御するための複数の属性 (たとえば、auto) をサポートします。 -crop-areaは自動トリミングの面積率の制御、guidesはクロップ枠補助線の表示の有無、view-modeはクロッパーのモードなどを制御します。さらに、ユーザーがクロップ ボックスをより適切に操作できるように、クロップ ボックスの移動モードを「移動」に設定しました。

クロップ ボタンは、クロップされた画像の Base64 エンコーディングをコンソールに出力する

onCrop メソッドにバインドされています。開発者は、実際のニーズに応じてこのメソッドを書き換えることができます。

最後に、

CropImage.vue コンポーネントを App.vue ファイルに導入する必要があります。 src/App.vue ファイルを次のように変更します。

<template>
  <div id="app">
    <CropImage />
  </div>
</template>

<script>
import CropImage from './views/CropImage.vue'

export default {
  name: 'App',
  components: {
    CropImage
  }
}
</script>

<style>
  #app {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px;
  }
</style>

上記のコードでは、

CropImage コンポーネントを App.vue## に導入します。 # ファイルを作成し、component タグの props を介してパラメータを渡して画像クロッパーを初期化します。 これまでのところ、通常に実行してトリミングを実行できる、単純な画像クロッパーの作成が完了しました。もちろん、これは単なる入門例であり、初心者でもコードを修正したり拡張したりすることで、Vue3 の使い方や開発スキルをさらに理解することができます。

以上がVUE3 入門例: 単純な画像クロッパーの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。