Vueはプラグインを使用して画像を比例してカットします

Vueはプラグインを使用して画像を比例してカットします

この記事では、プラグインを使用して画像の比例カットを実現するVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

1. プラグインを使用する - vueCropper

プラグインをインストールします: npm install vue-cropper
el-elementアップロードコンポーネントと組み合わせる

2. 例:

メインページ

データ(){
 戻る {
     フォームデータ:{
        現在のバナー画像:""
     },
     isShowCropper :false、
 }
}
<el-アップロード
      クラス="アバターアップローダー"
      リストタイプ="絵カード"
      アクション=""
      accept=".jpg、.jpeg、.png"
      :資格情報あり="true"
      :on-change="ファイル変更バナー"
      :自動アップロード="false"
      :ファイルリストを表示="false"
    >
    <div class="imgBoX">
        <img class="bannerImg" v-if="formData.currentBannerImg" title="クリックして変更" :src="formData.currentBannerImg" alt="" />
        <i class="el-icon-delete delImg" v-if="formData.currentBannerImg" title="削除"></i>
        <i v-if="!formData.currentBannerImg" slot="default" class="el-icon-plus"></i>
      </div>
      <div slot="tip" class="el-upload__tip">アップロードできるのは jpg、jpeg、png のみで、1 つのファイルのサイズは 10 MB を超えることはできません</div>
</el-アップロード>

// 画像をアップロードし、成功したらトリミングします async fileChangeBanner(file, fileList) {
      定数 fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      const fileTypeArr = ["jpg", "jpeg", "png", "JPG", "JPEG", "PNG"];
      (fileTypeArr.indexOf(fileType) < 0) の場合 {
        this.$alert("jpg、jpeg、またはpng形式の画像をアップロードしてください!"、"システムプロンプト", {
          confirmButtonText: 「確認」
        });
        ファイルリストを連結します(ファイルリストの長さ - 1);
        戻る;
      }
      // サイズ制限 const isLt2M = file.size / 1024 / 1024 < this.$FileSize;
      もし (!isLt2M) {
        this.$alert(`アップロードされたファイルのサイズは ${this.$FileSize}MB を超えることはできません!`, "システムプロンプト", {
          confirmButtonText: 「確認」
        });
        ファイルリストを連結します(ファイルリストの長さ - 1);
        戻る;
      }
      // 切り抜き部分を追加します this.isShowCropper = true;
      this.$nextTick(() => {
        this.$refs.vueCropperDialog.open(ファイル);
      });
    },

vueCropperDialogがコンポーネントとして導入されました

<vueCropperDialog @cutImgEnter="cutImgEnter" v-if="isShowCropper" ref="vueCropperDialog"></vueCropperDialog>

vueクロッパーダイアログ.vue

<!-- -->
<テンプレート>
  <!-- vueCropper による画像の切り取りの実装 -->
  <el-dialog title="画像の切り抜き" :visible.sync="dialogVisible" append-to-body>
    <div class="cropper-content">
      <div class="cropper" style="text-align:center">
        <vueクロッパー
          ref="クロッパー"
          :img="オプション.img"
          :outputSize="オプションのサイズ"
          :outputType="オプション.outputType"
          :info="true"
          :full="オプション.full"
          :canMove="オプション.canMove"
          :canMoveBox="オプション.canMoveBox"
          :original="オプション.original"
          :autoCrop="オプション.autoCrop"
          :fixed="オプション.fixed"
          :fixedNumber="オプション.fixedNumber"
          :centerBox="オプション.centerBox"
          :infoTrue="オプション.infoTrue"
          :fixedBox="オプション.fixedBox"
        </vueクロッパー>
      </div>
    </div>
    <div スロット="フッター" クラス="ダイアログ フッター btnBox">
      <div>
        <el-button icon="el-icon-refresh-left" @click="turnLeftOrRight('left')">左に回転</el-button>
        <el-button icon="el-icon-refresh-right" @click="turnLeftOrRight('right')">右に回転</el-button>
      </div>
      <div>
        <el-button @click="dialogVisible = false">キャンセル</el-button>
        <el-button type="primary" @click="finish" :loading="loading">確認</el-button>
      </div>
    </div>
  </el-ダイアログ>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ() {
    戻る {
      ファイル情報:"",
      ダイアログ表示: false、
      // クロッピングコンポーネントの基本設定オプション
      オプション: {
        : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
      picsList: [], // ページに表示される配列 // 重複した送信を防ぐ loading: false
    };
  },
  メソッド: {
    開く(ファイル) {
      this.fileinfo = ファイル;
      this.option.img = ファイル.url;
      this.dialogVisible = true;
    },
    blobToFile(Blob、ファイル) {
      const files = new window.File([theBlob], file.name, { type: theBlob.type });
      ファイルを返します。
    },
    //左回転 turnLeftOrRight(type) {
      if (type == "左") {
        this.$refs.cropper.rotateLeft();
      } それ以外 {
        this.$refs.cropper.rotateRight();
      }
    },
    // クリックして切り取ります。このステップは処理されたアドレスを取得することです。finish() {
      this.$refs.cropper.getCropBlob((データ) => {
        this.loading = true;
        const changeFile = this.blobToFile(data, this.fileinfo);
        const fileUrl = window.URL.createObjectURL(データ);
        // 切り取りが成功した後のコールバック。$emit("cutImgEnter", changeFile, fielUrl);
        this.loading = false;
        this.dialogVisible = false;
      });
    }
  }
};
</スクリプト>
<style lang="scss" スコープ>
// スクリーンショット.cropper-content {
  .クロッパー{
    幅: 自動;
    高さ: 300px;
  }
}
.btnボックス{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースの間;
}
</スタイル>

3. 効果

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vue-cropper コンポーネントは画像の切り取りとアップロードを実現します
  • Vue+elementは画像のアップロードと切り抜き機能を実現します
  • Vue はモバイル画像の切り取りとアップロード機能を実装しました
  • Vueプロジェクトで画像切り抜き機能を実装する詳細な説明
  • Vueベースのモバイル画像切り抜きコンポーネント機能
  • Vue ベースの画像切り抜きとアップロード機能の Cropper js 実装コード
  • Vueは写真を切り取ってアップロードすることを実現
  • Vue のキャンバスで画像をトリミングする例
  • Vue 画像の切り取りとアップロードコンポーネントの実装
  • Vue 画像切り抜きコンポーネントのサンプルコード

<<:  IDEA の Docker プラグインを介して Springboot プロジェクトを公開する方法の詳細なチュートリアル

>>:  MySQLデッドロックの原因と解決策

推薦する

MySQLクエリ書き換えプラグインの使用

クエリ書き換えプラグインMySQL 5.7.6 以降、MySQL Server は、サーバーが実行す...

HTML チュートリアル: 順序付きリスト

<br />原文: http://andymao.com/andy/post/103.h...

インライン要素とブロック要素とは何ですか?

1. インライン要素はコンテンツの幅のみを占めますが、ブロック要素はコンテンツの量に関係なく行全体を...

W3C チュートリアル (7): W3C XSL アクティビティ

スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。XSL 言語は、X...

MySQLクエリステートメントの簡単な操作例

この記事では、例を使用して、MySQL クエリ ステートメントの簡単な操作を説明します。ご参考までに...

Centos7でのMySQLインストールチュートリアル

MySQLインストールチュートリアル、参考までに具体的な内容は次のとおりです。 1. ダウンロードY...

ファイアウォールの iptables 戦略を使用して Linux サーバー上のポートを転送する方法

2つの異なるサーバー間の転送ポート転送を有効にするまず、デフォルトでは無効になっている IP 転送機...

Docker 構成コンテナの場所とヒントのまとめ

Docker の使用に関するヒント1. 停止したDockerコンテナをすべてクリーンアップする停止し...

MySQL 5.7.15 のインストールと設定方法のグラフィック チュートリアル (Windows)

MySQL をインストールする必要があるため、インストール手順を以下のように記録します。 自分なり...

Windows 8 での MySQL Community Server 5.6 のインストールと設定のチュートリアル

この記事では、Windows 8 での MySQL5.6 のインストールと設定のチュートリアルを記録...

MySQL でスロークエリを有効にする方法の例

序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...

CentOS での Docker の詳細なインストール チュートリアル

DockerにはCEとEEがあり、CE版はコミュニティ版(無料)、EE版はセキュリティを重視したエン...

Linuxファイルコマンドの使用

1. コマンドの紹介ファイル コマンドは、ファイルの種類を識別するために使用されます。ファイル チェ...

iframe src 割り当ての問題 (サーバー側)

今日この問題に遭遇しました。サーバー側でiframeのsrc値を再割り当てし、iframeにIDを追...

h5入力ボックスプロンプト+通常のテキストボックスプロンプトを実装する方法

XML/HTML コードコンテンツをクリップボードにコピー<入力 id = "ユーザ...