Implementation of image cropping and uploading function

This time I will bring you the implementation of the image cropping and uploading function. What are the precautions for implementing the image cropping and uploading function. The following is a practical case, let’s take a look.

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

First download and import cropper js,

npm install cropper js --save

Introduce it on the required page: import Cropper from "cropper The code of js"

html is as follows:

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

Mainly js code, as follows

1, set the initial variables in data, bind the data, imgCropperData is me 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, initially change 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. 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("上传成功"); 
 //这边写图片的上传 
 } 
 }

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to implement back force refresh on WeChat web side

How to use the React BootStrap framework

react native uses fetch to upload images

How to compress the files packaged by webpack to become smaller

The above is the detailed content of Implementation of image cropping and uploading function. For more information, please follow other related articles on the PHP Chinese website!