この記事では、プラグインを使用して画像の比例カットを実現するVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 1. プラグインを使用する - vueCropper プラグインをインストールします: npm install vue-cropper 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: IDEA の Docker プラグインを介して Springboot プロジェクトを公開する方法の詳細なチュートリアル
クエリ書き換えプラグインMySQL 5.7.6 以降、MySQL Server は、サーバーが実行す...
<br />原文: http://andymao.com/andy/post/103.h...
1. インライン要素はコンテンツの幅のみを占めますが、ブロック要素はコンテンツの量に関係なく行全体を...
スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。XSL 言語は、X...
この記事では、例を使用して、MySQL クエリ ステートメントの簡単な操作を説明します。ご参考までに...
MySQLインストールチュートリアル、参考までに具体的な内容は次のとおりです。 1. ダウンロードY...
2つの異なるサーバー間の転送ポート転送を有効にするまず、デフォルトでは無効になっている IP 転送機...
Docker の使用に関するヒント1. 停止したDockerコンテナをすべてクリーンアップする停止し...
MySQL をインストールする必要があるため、インストール手順を以下のように記録します。 自分なり...
この記事では、Windows 8 での MySQL5.6 のインストールと設定のチュートリアルを記録...
序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...
DockerにはCEとEEがあり、CE版はコミュニティ版(無料)、EE版はセキュリティを重視したエン...
1. コマンドの紹介ファイル コマンドは、ファイルの種類を識別するために使用されます。ファイル チェ...
今日この問題に遭遇しました。サーバー側でiframeのsrc値を再割り当てし、iframeにIDを追...
XML/HTML コードコンテンツをクリップボードにコピー<入力 id = "ユーザ...