How to implement the image cropping and uploading function in js through vue in cropper

This article mainly introduces relevant information about the image cropping and uploading function of cropper js based on vue. Friends who need it can refer to it

I did a project a few days ago about the vue project that requires the avatar cropping and uploading function. I read an article and made modifications based on it to complete this function. I would like to share it with you. Original text: http://www.jb51.net/article/135719.htm

First download and introduce cropper js,

npm install cropper js --save

when needed The page introduction: import Cropper from "cropper js"

The code of html is as follows:

<template> 
 <p id="demo"> 
 <!-- 遮罩层 --> 
 <p class="container" v-show="panel"> 
 <p> 
  <img src="/static/imghwm/default1.png"  data-src="url"  class="lazy"  id="image" : 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>

Mainly js The code is as follows

1. The initial variables are set in the data and the data is bound. The imgCropperData is what I defined to determine the image format.

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

2, initialize the cropping frame in mounted

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.methods There are many methods, including creating URL path, input box change event, canvas drawing, and confirm submission for upload. I also added a cancellation event function to determine the type and size of the uploaded file.

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to set global variables in vue2? (Detailed tutorial)

How to implement the string splicing function in JS (extending String.prototype.format)

Use ES6 to solve the memory leak problem through WeakMap (detailed tutorial)

The above is the detailed content of How to implement the image cropping and uploading function in js through vue in cropper. For more information, please follow other related articles on the PHP Chinese website!