So implementieren Sie die Funktion zum Zuschneiden und Hochladen von Bildern in js über Vue in Cropper

In diesem Artikel werden hauptsächlich relevante Informationen zur Funktion zum Zuschneiden und Hochladen von Bildern von Cropper Js basierend auf Vue vorgestellt. Freunde, die sie benötigen, können darauf verweisen.

Ich habe vor ein paar Tagen ein Projekt über das Vue-Projekt durchgeführt erfordert die Funktion zum Zuschneiden und Hochladen von Avataren. Ich habe einen Artikel gelesen und darauf basierende Änderungen vorgenommen, die ich gerne mit Ihnen teilen möchte. Originaltext: http://www.jb51.net/article/135719.htm

Laden Sie zuerst Cropper Js herunter und stellen Sie es vor,

npm install cropper js --save

Bei Bedarf Die Seiteneinführung: import Cropper from "cropper js"

Der HTML-Code lautet wie folgt:

<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>

Es handelt sich hauptsächlich um JS-Code, wie folgt

1, legen Sie die Anfangsvariablen in den Daten fest und binden Sie die Daten imgCropperData ist das, was ich definiert habe, um das Bildformat zu bestimmen.

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

2, initialisieren Sie den Zuschneiderahmen in montierten

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; 
 } 
 }); 
 }

3.Methoden Dort Es gibt viele Methoden, darunter das Erstellen eines URL-Pfads, das Ändern eines Eingabefelds, das Zeichnen einer Leinwand und das Bestätigen der Übermittlung zum Hochladen. Ich habe außerdem eine Abbruchereignisfunktion hinzugefügt, um den Typ und die Größe der hochgeladenen Datei zu bestimmen.

methods: { 
 //取消上传 
 cancel() { 
 this.panel = false; 
 var obj = document.getElementById('change') ; 
 obj.outerHTML=obj.outerHTML; 
 }, 
 //创建url路径 
 getObjectURL(file) { 
 var url = null; 
 if (window.createObjectURL != undefined) { 
 // basic 
 url = window.createObjectURL(file); 
 } else if (window.URL != undefined) { 
 // mozilla(firefox) 
 url = window.URL.createObjectURL(file); 
 } else if (window.webkitURL != undefined) { 
 // webkit or chrome 
 url = window.webkitURL.createObjectURL(file); 
 } 
 return url; 
 }, 
 //input框change事件，获取到上传的文件 
 change(e) { 
 let files = e.target.files || e.dataTransfer.files; 
 if (!files.length) return; 
 let type = files[0].type; //文件的类型，判断是否是图片 
 let size = files[0].size; //文件的大小，判断图片的大小 
 if (this.imgCropperData.accept.indexOf(type) == -1) { 
 alert("请选择我们支持的图片格式！"); 
 return false; 
 } 
 if (size > 5242880) { 
 alert("请选择5M以内的图片！"); 
 return false; 
 } 
 this.picValue = files[0]; 
 this.url = this.getObjectURL(this.picValue); 
 //每次替换图片要重新得到新的url 
 if (this.cropper) { 
 this.cropper.replace(this.url); 
 } 
 this.panel = true; 
 }, 
 //确定提交 
 commit() { 
 this.panel = false; 
 var croppedCanvas; 
 var roundedCanvas; 
 if (!this.croppable) { 
 return; 
 } 
 // Crop 
 croppedCanvas = this.cropper.getCroppedCanvas(); 
 // Round 
 roundedCanvas = this.getRoundedCanvas(croppedCanvas); 
 this.headerImage = roundedCanvas.toDataURL(); 
 //上传图片 
 this.postImg(); 
 }, 
 //canvas画图 
 getRoundedCanvas(sourceCanvas) { 
 var canvas = document.createElement("canvas"); 
 var context = canvas.getContext("2d"); 
 var width = sourceCanvas.width; 
 var height = sourceCanvas.height; 
 canvas.width = width; 
 canvas.height = height; 
 context.imageSmoothingEnabled = true; 
 context.drawImage(sourceCanvas, 0, 0, width, height); 
 context.globalCompositeOperation = "destination-in"; 
 context.beginPath(); 
 context.arc( 
 width / 2, 
 height / 2, 
 Math.min(width, height) / 2, 
 0, 
 2 * Math.PI, 
 true 
 ); 
 context.fill(); 
 return canvas; 
 }, 
 //提交上传函数 
 postImg() { 
 alert("上传成功"); 
 //这边写图片的上传 
 } 
 }

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Wie lege ich globale Variablen in vue2 fest? (Detailliertes Tutorial)

So implementieren Sie die String-Verkettung in JS (Erweitern von String.prototype.format)

Verwenden ES6 zur Lösung des Speicherverlustproblems durch WeakMap (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion zum Zuschneiden und Hochladen von Bildern in js über Vue in Cropper. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!