Vue Mobile Avatar Upload, no more than 50K

First look at the effect:

A little explanation: the first picture is User.vue, the second picture is click on the image of the system comes with the upload file format (not the same as Android and iOS), the third picture is the Cropper component (I set it separately), the fourth picture is the upload completed User.vue.

In fact, the plug-in is not difficult, just to fit the project and the mobile side, made some changes.

Official Introduction: HTTPS://WWW.NPMJS.COM/PACKAGE/CROPPERJS

First step: Install the Plugin

CNPM Install Cropperjs--save

Step two: Detach set to plugin Cropper.vue

<template> <div id= "demo" class= "Cropperimg" > <!--Mask Layer--<div class= "container" v-show= "pane L "> <div> : src= "url"alt= "Picture" > </div> <button type= "button" id= "button"@click = "Crop"> OK </button> </div> <div> <div class= "show" style= "HEIGHT:56PX;WIDTH:56PX;" > <div class= "Picture": style= "' Backgroundimage:url (' +Headerimage+ ') ' "style=" HEIGHT:56PX;WIDTH:56PX; " > </div> </div> <div style= "opacity:0;width:360px;position:absolute;top:0;right:0 ; height:56px; " ><input type= "file" id= "change" accept= "image" @change = "Change" style= "HEIGHT:56PX;" >          <label for= "Change" ></label> </div> </div> </div></template><s Cript>import Cropper from ' cropperjs '//import plugin export default {props:{headerimage:{//From the User.vue parent component of the database picture, that is, the user from Locally uploaded image type:string, default: '}}, data () {return {picvalue: ', Cropper: ', croppabl    E:false, Panel:false, url: ', Postheaderimg: '}}, mounted () {//Initialize this crop box 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;  }    });       }, Methods: {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;      }, Change (e) {Let files = E.target.files | | e.datatransfer.files;      if (!files.length) return;      This.panel = true;            This.picvalue = Files[0];      This.url = This.getobjecturl (This.picvalue);      Each time you replace a picture to get a new URL if (this.cropper) {this.cropper.replace (This.url);    } This.panel = true;        }, Crop () {This.panel = false;        var Croppedcanvas;        var Roundedcanvas;        if (!this.croppable) {return;        }//Crop Croppedcanvas = This.cropper.getCroppedCanvas ();        Console.log (This.cropper)//Round Roundedcanvas = This.getroundedcanvas (Croppedcanvas);         This.postheaderimg = Roundedcanvas.todataurl ();//Pass to Parent component this. $emit (' Getheaderimage ', Roundedcanvas.todataurl ());THIS.POSTIMG ()//Upload picture}, Getroundedcanvas (Sourcecanvas) {var canvas = document.createelement (' CA      Nvas ');      var context = Canvas.getcontext (' 2d ');      var width = sourcecanvas.width; var height = sourcecanvas.height;//To the size of each picture does not exceed 50k, so no matter how large the clip, the last upload, the maximum width of not more than 90. if (width > All) {width = all} if (height > All) {height = all}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 () {this. $http. Post (This.http_h + "Bp/user/uploadheadimage", {fieldname:this.        POSTHEADERIMG},). Then (RES) =>{let response = res.body;            if (Response.code = =) {this. $vux. Toast.show ({type: "Success", Text: "Upload avatar succeeded", time:1000})}else{this. $vux. Toast.show ({type: "text", Text:response.mes    Sage, time:1000})}); }}}</script>

　

Step Three: Set the parent component

First: Introduce components

Import cropper from "@/components/cropper"

Then: in the parent component where you need to set the Avatar,

<cropper:headerimage= "Headerimage"  @getHeaderImage = "Newheaderimage" ></cropper>

Small explanation:: headerimage= "Headerimage" (passed to subcomponents)

The component passes the emit event mode to the picture after the parent component changes, and the parent component is received through the Newheaderimage event.

Newheaderimage (newimg) {  this.headerimage = newimg;}

　

Fourth Step: Test

Summary: Cropper on the mobile side, there may be picture offset phenomenon, which requires you to modify the CSS according to your project, I also made the changes to meet our UI effect. In the Node_modules file in the VUE-CLI project, you can find it directly. I hope I can help you! Come on

Vue Mobile Avatar Upload, no more than 50K