Implémentation de la fonction de recadrage et de téléchargement d'images

Cette fois, je vais vous présenter la mise en œuvre de la fonction de recadrage et de téléchargement d'images. Quelles sont les précautions pour la mise en œuvre de la fonction de recadrage et de téléchargement d'images. Ce qui suit est un cas pratique, jetons un coup d'œil.

J'ai réalisé il y a quelques jours un projet sur le projet vue qui nécessite la fonction de recadrage et de téléchargement d'avatar. J'ai lu un article et j'ai effectué les modifications basées sur celui-ci pour compléter cette fonction avec laquelle j'aimerais le partager. toi. Texte original : http://www.jb51.net/article/135719.htm

Premier téléchargement et importation de cropper js,

npm install cropper js --save

Introduisez-le sur la page requise : import Cropper from "cropper js"

Le code de

html est le suivant :

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

Principalement du code js, comme suit

1 Définir les variables initiales dans les données et lier les données est imgCropperData. ce que j'ai défini pour déterminer le format de l'image.

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

2. Modification initiale du cadre de recadrage dans le montage

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 Il existe de nombreuses méthodes, notamment la création d'un chemin d'URL, l'événement de changement de zone de saisie, le dessin du canevas et la confirmation de la soumission. Télécharger. J'ai également ajouté une fonction d'événement d'annulation pour déterminer le type et la taille du fichier téléchargé.

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("上传成功"); 
 //这边写图片的上传 
 } 
 }

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment implémenter l'actualisation de force arrière sur le côté Web de WeChat

Comment utiliser le framework React BootStrap

React native utilise la récupération pour télécharger des images

Comment réduire la taille des fichiers emballés par Webpack après compression

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!