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 に配列を保存するサンプルコードと方法

推薦する

Nginx ドメイン名 SSL 証明書の構成 (Web サイトの http を https にアップグレード)

序文HTTP と HTTPS日常生活でよく使われる URL は、おおまかに次の 2 種類に分けられま...

スパンの最小高さを定義するソリューションは効果がありません

span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...

MySQL 8.0.17 winx64 (Navicat 付き) 手動構成バージョンのインストール チュートリアル図

1. ダウンロードアドレス: mysql-8.0.17-winx64ダウンロードして解凍する2. フ...

React+axios は github 検索ユーザー機能を実装します (サンプル コード)

負荷リクエスト成功リクエストに失敗しました cmdをクリックし、ファイルパスでEnterキーを押しま...

要素のel-tree複数選択ツリー(チェックボックス)親子ノードの関連付けが関連付けられていません

属性チェック-厳密公式ドキュメントでは、チェックボックスが表示されるときに親項目と子項目を互いに関連...

MySQL 5.7.17 インストール グラフィック チュートリアル (Windows)

最近データベースを学び始めたのですが、とても興味深いコースだと感じていますが、含まれる内容の多くは私...

VMware に Centos8 をインストールする詳細なチュートリアル

CentOS公式サイトアドレスhttps://www.centos.org/まず必要なファイルをダウ...

jQuery ステップ進行軸プラグインの実装コード

毎日のjQueryプラグイン - ステップ進捗軸 ステップ進捗軸ツール系のサイトでは入門チュートリア...

MySql インポート CSV ファイルまたはタブ区切りファイル

別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...

vue+el-upload は複数ファイルの動的アップロードを実現します

vue+el-upload 複数ファイルの動的アップロード、参考までに具体的な内容は以下のとおりです...

初心者向け入門講座⑧:記事サイトを簡単に作る

前回の投稿では、Web ページの作成方法について説明しました。Web サイトは多くの Web ページ...

MySQL 8.0.23のルートパスワードをリセットするための最適なソリューション

この方法は2021年2月7日に編集されました。私が使用しているバージョンは8.0.23です。事件の原...

Tomcatのクラスロードメカニズムのプロセスとソースコード分析

目次序文1. Tomcat クラスローダー構造図: 2. Tomcat のクラスロードプロセスの説明...

MySQLプロセスを安全かつ適切にシャットダウンする方法

序文この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安...

バックエンド サーバー プロキシとして Nginx を推奨する理由 (理由分析)

1. はじめに実際のサーバーはパブリックインターネットに直接公開されるべきではありません。そうしな...