クロッパーの vue を介して js で画像のトリミングとアップロード機能を実装する方法

この記事では主に、vue に基づいた Cropper js の画像のトリミングとアップロード機能に関する関連情報を紹介します。必要な友達は参考にしてください。

アバターのトリミングとアップロードが必要な vue プロジェクトについて、数日前にプロジェクトを実行しました。ある記事を読んだので、これに基づいて修正を加えた結果、この機能が完成したので共有したいと思います。原文: http://www.jb51.net/article/135719.htm

まず Cropper js をダウンロードして導入します、

npm install cropper js --save

必要なページに導入します: import Cropper from "cropper js"

html コードは次のとおりです。

主に以下のようなjsコ​​ードです

​​

1.データに初期変数を設定し、画像形式を決定するために定義したのがimgCropperDataです。

<template> 
 <p id="demo"> 
 <!-- 遮罩层 --> 
 <p class="container" v-show="panel"> 
 <p> 
  <img id="image" :src="url" alt="Picture"> 
 </p> 
 <button type="button" id="button" @click="commit">确定</button> 
 <button type="button"id="cancel" @click="cancel">取消</button> 
 </p> 
 <p style="padding:20px;"> 
 <p class="show"> 
  <p class="picture" :style="&#39;backgroundImage:url(&#39;+headerImage+&#39;)&#39;"> 
  </p> 
 </p> 
 <p style="margin-top:20px;text-align: left;"> 
  <input type="file" id="change" accept="image" @change="change"> 
  <label for="change"></label> 
 </p> 
 </p> 
 </p> 
</template>

2、最初にマウントされたクロップフレームを変更します

data() { 
 return { 
 headerImage: "", 
 picValue: "", 
 cropper: "", 
 croppable: false, 
 panel: false, 
 url: "", 
 imgCropperData: { 
 accept: "image/gif, image/jpeg, image/png, image/jpg" 
 } 
 }; 
 }

3には、URLパスの作成、入力ボックスの変更イベント、キャンバスの描画、アップロードの送信の確認など、さまざまな方法があります。アップロードされたファイルの種類とサイズを判断するキャンセルイベント関数も追加しました。

mounted() { 
 //初始化这个裁剪框 
 var self = this; 
 var image = document.getElementById("image"); 
 this.cropper = new Cropper(image, { 
 aspectRatio: 1, 
 viewMode: 1, 
 background: false, 
 zoomable: false, 
 ready: function() { 
 self.croppable = true; 
 } 
 }); 
 }

以上、皆様の参考になれば幸いです。

関連記事:

vue2でグローバル変数を設定するには? (詳細なチュートリアル)

JS で文字列スプライシング関数を実装する方法 (String.prototype.format の拡張)

ES6 を使用して WeakMap によるメモリ リーク問題を解決する (詳細なチュートリアル)

以上がクロッパーの vue を介して js で画像のトリミングとアップロード機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。