Vueクリップにテキストを追加する方法

Vue は、応答性の高い Web アプリケーションの開発に使用できる人気の JavaScript フレームワークです。テキストの編集と追加は、ビデオやアニメーションを作成する際の中心的なプロセスです。 Vue では、サードパーティのプラグインやカスタム コンポーネントを使用してこれらの機能を簡単に実装できます。以下では、Vue で Vue-Video-Player プラグインとカスタム Vue コンポーネントを使用して、テキストの編集と追加の機能を実現する方法を紹介します。

1. Vue-Video-Player プラグインを使用してテキストを編集および追加します

Vue-Video-Player は、柔軟な API とユーザーインターフェイスコンポーネント。 Vue-Video-Player を使用してテキストをクリップして追加できます。具体的な手順は次のとおりです:

1. Vue-Video-Player をインストールします

Vue プロジェクトでは、 Vue-Video-Player をインストールするための npm package Manager。ターミナルに次のコマンドを入力してインストールします:

npm install --save vue-video-player

2. Vue-Video-Player

を Vue コンポーネントに導入します。 Vue コンポーネントでは、import ステートメントを使用して Vue-Video-Player ファイルと CSS ファイルをインポートする必要があります。以下は参照コードです:

<template>
<div>

<video-player ref="videoPlayer" :options="playerOptions"></video-player>

</div>
</template>

< script>
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme .css '

デフォルトのエクスポート {
コンポーネント: {

VideoPlayer

},
データ () {

return {
  playerOptions: {
    controls: true,
    autoplay: false,
    sources: [{
      src: 'your_video_url.mp4',
      type: 'video/mp4'
    }]
  }
}

}
}
&lt ;/ script>

3. Vue-Video-Player を使用して編集機能を実装します

Vue-Video-Player には、編集を実装するために使用できるスクリーンショット機能が用意されています。以下は参照コードです:

this.$refs.videoPlayer.shoot()

このコードは現在のビデオ フレームをインターセプトし、スクリーンショットの URL を返します。この URL を保存する変数を設定できます。

4. Vue-Video-Player を使用してテキスト機能を追加する

Vue-Video-Player は、ビデオにテキストを追加できるポップアップ コンポーネントも提供します。以下は参照コードです:

<template>
<div>

<video-player ref="videoPlayer" :options="playerOptions"></video-player>
<popup :show.sync="showPopup">
    <textarea v-model="text"></textarea>
    <button v-on:click="addText">Add</button>
</popup>

</div>
</template>

< script>
import { Popup } from 'vue-video-player'

export デフォルト {
コンポーネント: {

Popup

},
data () {

return {
  playerOptions: {
    controls: true,
    autoplay: false,
    sources: [{
      src: 'your_video_url.mp4',
      type: 'video/mp4'
    }]
  },
  showPopup: false,
  text: '',
  style: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    fontSize: '30px'
  }
}

},
メソッド: {

addText () {
  const video = this.$refs.videoPlayer.video
  const canvas = document.createElement('canvas')
  canvas.width = video.videoWidth
  canvas.height = video.videoHeight
  const ctx = canvas.getContext('2d')
  ctx.drawImage(video, 0, 0)
  ctx.font = this.style.fontSize + ' Arial'
  ctx.fillStyle = '#fff'
  const x = canvas.width / 2 - ctx.measureText(this.text).width / 2
  const y = canvas.height / 2 + this.style.fontSize / 2
  ctx.fillText(this.text, x, y)
  const imgUrl = canvas.toDataURL('image/png')
  this.$refs.videoPlayer.addText(imgUrl, this.style)
  this.showPopup = false
}

}
}
</script>

上記のコードでは、ポップアップを使用しますコンポーネントを使用してテキストを編集し、textarea を使用してテキスト変数をバインドするためのポップアップ ボックスを作成します。 addText メソッドでは、canvas 要素を使用してビデオ フレームにテキストを追加し、生成された画像 URL を Vue-Video-Player の addText 関数に渡します。

2. カスタム Vue コンポーネントを使用してテキストのクリッピングと追加を実装する

Vue コンポーネントをカスタマイズすることで、テキストのクリッピングと追加をより柔軟に実装できます。具体的な手順は次のとおりです:

1. Vue コンポーネントの作成

Vue コンポーネントでは、video 要素を使用してビデオを再生し、canvas 要素を使用してビデオ フレームを編集できます。以下は参照コードです:

<template>
<div>

<video ref="video" :src="videoUrl" controls></video>
<canvas ref="canvas" :width="videoWidth" :height="videoHeight" v-on:mousedown="onMouseDown" v-on:mousemove="onMouseMove" v-on:mouseup="onMouseUp"></canvas>
<button v-on:click="shoot">Clip</button>
<button v-on:click="showPopup = true">Add Text</button>
<popup :show.sync="showPopup">
  <textarea v-model="text"></textarea>
  <button v-on:click="addText">Add</button>
</popup>

</div>
</template>

< script>
import { Popup } from './Popup.vue'

export デフォルト {
コンポーネント: {

Popup

},
props: {

videoUrl: {
  type: String,
  required: true
}

},
データ () {

return {
  showPopup: false,
  text: '',
  startX: 0,
  startY: 0,
  endX: 0,
  endY: 0,
  videoWidth: 0,
  videoHeight: 0
}

},
マウントされた () {

const video = this.$refs.video
video.addEventListener('loadedmetadata', () => {
  this.videoWidth = video.videoWidth
  this.videoHeight = video.videoHeight
})

},
メソッド: {

onMouseDown (event) {
  const canvas = this.$refs.canvas
  const rect = canvas.getBoundingClientRect()
  this.startX = event.clientX - rect.left
  this.startY = event.clientY - rect.top
},
onMouseMove (event) {
  const canvas = this.$refs.canvas
  const rect = canvas.getBoundingClientRect()
  this.endX = event.clientX - rect.left
  this.endY = event.clientY - rect.top
},
onMouseUp () {
  const canvas = this.$refs.canvas
  const ctx = canvas.getContext('2d')
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  const video = this.$refs.video
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
  ctx.beginPath()
  ctx.rect(this.startX, this.startY, this.endX - this.startX, this.endY - this.startY)
  ctx.stroke()
},
shoot () {
  const canvas = this.$refs.canvas
  const ctx = canvas.getContext('2d')
  const video = this.$refs.video
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
  const imgUrl = canvas.toDataURL('image/png')
  window.open(imgUrl)
},
addText () {
  const canvas = this.$refs.canvas
  const ctx = canvas.getContext('2d')
  ctx.font = '30px Arial'
  ctx.fillStyle = '#fff'
  const x = canvas.width / 2 - ctx.measureText(this.text).width / 2
  const y = canvas.height / 2 + 30 / 2
  ctx.fillText(this.text, x, y)
  const imgUrl = canvas.toDataURL('image/png')
  window.open(imgUrl)
  this.showPopup = false
}

}
}
</script>

2. ポップアップ コンポーネントの作成

ポップアップ コンポーネントは、スロットとで構成されるポップアップ ボックスをすばやく作成できます。閉じるボタン div 要素で構成されます。以下は参照コードです:

<template>
<div class="popup" v-show="show">

<div class="popup-content">
  <slot></slot>
  <button v-on:click="$emit('update:show', false)">Close</button>
</div>

</div>
</template>

<script>
デフォルトのエクスポート {
props: {

show: {
  type: Boolean,
  required: true
}

}
}
</script>

上記は、Vue-Video-Player プラグインとカスタム Vue コンポーネントを使用してテキストのクリッピングと追加を実現する 2 つの方法です。実際のニーズに応じて、ビデオ編集機能を実装するさまざまな方法を選択できます。これらのテクノロジーを通じて、魅力的な Web ビデオやアニメーションを作成し、より柔軟でパーソナライズされたビデオ編集エクスペリエンスを実現できます。

以上がVueクリップにテキストを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。