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="'backgroundImage:url('+headerImage+')'"> </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!