Vue 画像切り抜きコンポーネントのサンプルコード

Vue 画像切り抜きコンポーネントのサンプルコード

例:

ヒント:このコンポーネントはvue-cropperの二次パッケージに基づいています

プラグインをインストールする

npm インストール vue-cropper

糸を追加 vue-cropper

パッケージ化されたコンポーネントを書く

<!-- シンプルな画像切り抜きコンポーネント--- 二次パッケージング-->
<!-- その他の API https://github.com/xyxiao001/vue-cropper -->
<!-- 使用法: 表示または非表示にする画像の比率を渡します。方法: 下部のボタンのクリックをリッスンします --- 自分でプロパティ クエリ ドキュメントを追加します -->

<テンプレート>
  <div v-if="value" :value="value" @input="val => $emit('input', val)" class="conbox">
    <div class="info">
      <vueクロッパー
        ref="クロッパー"
        :img="画像"
        :outputSize="出力サイズ"
        :outputType="出力タイプ"
        :info="情報"
        :canScale="canScale"
        :autoCrop="自動クロップ"
        :fixed="固定"
        :fixedNumber="固定数"
        :full="フル"
        :fixedBox="固定ボックス"
        :canMove="移動可能"
        :canMoveBox="canMoveBox"
        :original="オリジナル"
        :centerBox="センターボックス"
        :infoTrue="情報True"
        :mode="モード"
      </vueクロッパー>
    </div>
    <div class="btns">
      <div @click="clickCancelCut" class="cancel">キャンセル</div>
      <img @click="clickRotate" src="../../assets/paradise/rotate.png" alt="" />
      <div @click="clickOk" class="okey">OK</div>
    </div>
  </div>
</テンプレート>

<スクリプト>
'vue-cropper' から VueCropper をインポートします。
エクスポートデフォルト{
  名前: 'PictureCropping'、
  コンポーネント: { VueCropper },
  小道具: {
    価値: {
      タイプ: ブール値、
      デフォルト: false、
    },
    //画像アドレスをトリミングimg: {
      タイプ: 文字列、
      デフォルト: ''、
    },
    //スクリーンショットフレームのアスペクト比 fixedNumber: {
      タイプ: 配列、
      デフォルト: () => {
        [1, 1]を返します。
      },
    },
  },
  データ() {
    戻る {
      // クロッピングコンポーネントの基本設定オプション
      : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
  },
  計算: {},
  時計: {}、
  //ライフサイクル - 作成完了(現在の this インスタンスにアクセス)
  作成された() {},
  //ライフサイクル - マウント完了(DOM要素にアクセス)
  マウント() {},
  メソッド: {
    クリックキャンセルカット() {
      this.$emit('clickCancelCut', 'キャンセルするにはクリック');
      this.$refs.cropper.stopCrop();
      this.$refs.cropper.clearCrop();
    },
    クリック回転() {
      this.$refs.cropper.rotateRight();
      this.$emit('clickRotate', 'クリックして回転します');
    },
    クリックOK() {
      //トリミングされたbase64を出力
      this.$refs.cropper.getCropData(データ => {
        this.$emit('clickOk', データ);
        this.$refs.cropper.stopCrop();
        this.$refs.cropper.clearCrop();
      });
    },
  },
};
</スクリプト>
<style lang='less' スコープ>
/* @import url(); CSS クラスをインポート*/
.コンボックス{
  位置: 固定;
  上: 0;
  右: 0;
  下部: 0;
  左: 0;
  ボックスのサイズ: 境界線ボックス;
  高さ:100vh;
  幅: 100%;
  背景色: #000;
  ディスプレイ: フレックス;
  flex-direction: 列;
  コンテンツの中央揃え: 中央;
  。情報 {
    幅: 自動;
    高さ: 800ピクセル;
    .vue-クロッパー{
      背景画像: なし;
      背景色: #000;
    }
  }
  .btns{
    パディング: 0 20px;

    色: #fff;
    テキスト配置: 中央;
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースの間;
    アイテムの位置を中央揃えにします。
    位置: 絶対;
    左: 0;
    右: 0;
    下: 15px;
    画像 {
      幅: 85px;
      高さ: 85px;
    }
    。キャンセル {
      背景色: #606465;
      パディング: 15px 20px;
      幅: 100ピクセル;
      境界線の半径: 10px;
    }
    .オキー{
      背景色: #df6457;
      パディング: 15px 20px;
      幅: 100ピクセル;
      境界線の半径: 10px;
    }
  }
}
</スタイル>

要約する

Vue イメージ クロッピング コンポーネントに関するこの記事はこれで終わりです。Vue イメージ クロッピング コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueプロジェクトは画像切り抜きコンポーネントの追加を実装します
  • Vue画像切り抜きプラグインvue-cropperの使い方を詳しく説明します
  • Vueは写真を切り取ってアップロードすることを実現
  • Vue 画像の切り取りとアップロードコンポーネントの実装
  • Vueプロジェクトで画像切り抜き機能を実装する詳細な説明
  • vue-image-cropは、Vueをベースにしたモバイル画像切り抜きコンポーネントの例です。
  • Vue-cropper 画像切り抜きの基本原理とアイデア
  • Vue を cropper.js ベースでカプセル化し、オンライン画像切り抜きコンポーネント機能を実現する
  • Vue ベースの画像切り抜きとアップロード機能の Cropper js 実装コード
  • VueプロジェクトのElementUIコンポーネントにおけるel-uploadコンポーネントと画像切り取り機能コンポーネントの使い方の詳しい説明

<<:  VMwareがwin10ホームバージョンに64ビットオペレーティングシステムをインストールできない問題を解決します

>>:  MySQL に配列を保存するサンプルコードと方法

推薦する

Mysql の varchar 型に関する注意点

varchar の保存ルール4.0 未満のバージョンでは、varchar(20) は 20 バイトを...

Docker の詳細なイラスト

1. Dockerの紹介1.1 仮想化1.1.1 仮想化とは何ですか?コンピュータにおける仮想化とは...

dockerログマウントの問題を解決する

重要なのは、ローカルサーバーに書き込み権限がないことですキーはここにあります(アクセス拒否)。私は肯...

MySQL がデータの削除と挿入に非常に時間がかかる問題の解決策

会社の開発者がテスト環境で挿入ステートメントを実行すると、正常に実行されるまでに 10 秒以上かかり...

JavaScript 上級プログラミング: 変数とスコープ

目次1. 元の値と参照値2. インスタンス3. 範囲1. 元の値と参照値6 つの単純なデータ型の値は...

MySQL の複合インデックスはどのように機能しますか?

目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...

MySQL データベース テーブルとデータベース パーティショニング戦略

まず、テーブルを分割する必要がある理由について説明します。データシートが数百万に達すると、1 回のク...

Vueライフサイクルの違いの詳細な説明

ライフサイクル分類vue の各コンポーネントは独立しており、各コンポーネントには独自のライフサイクル...

証明書を使用してリモート Docker サーバーに接続する方法

目次1. スクリプトを使用してDockerのTLSを暗号化する2. Dockerの設定を変更してリモ...

ラジオボタンと複数選択ボタンは画像を使用してスタイル設定されます

ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見か...

UDP シンプル サーバー クライアント コード例

UDP の理論については詳しく説明しません。UDP に関する HelloWorld プログラムを紹介...

MySQL 5.7.20 無料インストールバージョンの設定方法グラフィックチュートリアル

インターネット上で多くの関連チュートリアルを見てきましたが、インストール プロセスにはまだいくつかの...

vueを使用して登録ページの効果を実現し、vueを使用してSMS認証コードログインを実現します

この記事の例では、登録ページの効果を実現するためのVueの具体的なコードを参考までに共有しています。...

よく使われるn番目の子セレクターをまとめる

序文フロントエンドプログラミングでは、奇数、偶数などの数値を受け入れることができる nth-chil...

CSSで検索ボックスを非表示にする機能を実装します(アニメーション順方向と逆方向のシーケンス)

上部のメニュー バーに検索ボックスを配置するのは一般的なシナリオですが、検索機能がそれほど頻繁に使用...