Comment implémenter la fonction de recadrage et de téléchargement d'images dans js via vue dans cropper

Cet article présente principalement des informations pertinentes sur la fonction de recadrage et de téléchargement d'images de cropper js basée sur vue. Les amis qui en ont besoin peuvent s'y référer

J'ai réalisé un projet il y a quelques jours sur le projet vue qui. a besoin de la fonction de recadrage et de téléchargement d'avatar. J'ai lu un article et apporté des modifications en fonction de celui-ci pour compléter cette fonction. J'aimerais le partager avec vous. Texte original : http://www.jb51.net/article/135719.htm

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

npm install cropper js --save

Introduire dans la page requise : import Cropper from "cropper js"

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

Il s'agit principalement de code js , comme suit

1. Définir les variables initiales dans data et lier les données imgCropperData est 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, dans un premier temps changer le cadre de recadrage en monté

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 sur toile et la confirmation de la soumission pour le téléchargement. 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("上传成功"); 
 //这边写图片的上传 
 } 
 }

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Comment définir des variables globales dans vue2 ? (Tutoriel détaillé)

Comment implémenter la concaténation de chaînes en JS (extension de String.prototype.format)

Utiliser ES6 pour résoudre le problème de fuite de mémoire via WeakMap (tutoriel détaillé)

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!